@softheon/armature 10.18.2 → 10.23.0

package/README.md

@@ -1402,6 +1402,23 @@ this.oAuthRoleService.decodedToken$.subscribe(token => {
 });
 ```
 
+# Custom Auth Config
+
+If an application need to switch to a different issuer for auth and requires custom logic there is a CustomAuthConfigService the application can define and setup Auth for logins.
+
+1. Implement a class that extends `CustomAuthConfigService` and define the auth config function
+
+2. Inject the newly defined class into the component
+
+```typescript
+      providers: [
+      ...
+      { provide: CustomAuthConfigService, useValue: ImplementedCustomAuthConfigService } // your implemented custom auth config service here
+      ...
+    ]
+```
+
+
 # Elastic RUM set up
 
 In order to include RUM error handling and Route watching, the following should be included in your `app.module`

package/assets/styles/arm-theme.scss

@@ -1,32 +1,32 @@
 :root {
-    --primary-color-50-parts: #eaf7fb;
-    --primary-color-100-parts: #b7eaf6;
-    --primary-color-200-parts: #89dcf1;
-    --primary-color-300-parts: #5fcdec;
-    --primary-color-400-parts: #41c2ea;
-    --primary-color-500-parts: #27b7e9;
-    --primary-color-600-parts: #1da9db;
-    --primary-color-700-parts: #1095c8;
-    --primary-color-800-parts: #0f84b5;
-    --primary-color-900-parts: #006494;
+    --primary-color-50-parts: #EDF4FF;
+    --primary-color-100-parts: #B9D4FC;
+    --primary-color-200-parts: #8AB7FB;
+    --primary-color-300-parts: #5B9AF9;
+    --primary-color-400-parts: #3784F7;
+    --primary-color-500-parts: #146EF6;
+    --primary-color-600-parts: #1266F5;
+    --primary-color-700-parts: #0E5BF3;
+    --primary-color-800-parts: #0B51F2;
+    --primary-color-900-parts: #063FEF;
     --primary-color-A100-parts: #ffffff;
-    --primary-color-A200-parts: #f2f7ff;
-    --primary-color-A400-parts: #bfd7ff;
-    --primary-color-A700-parts: #a6c6ff;
-    --primary-color-contrast-50-parts: #000000;
-    --primary-color-contrast-100-parts: #000000;
-    --primary-color-contrast-200-parts: #000000;
-    --primary-color-contrast-300-parts: #000000;
-    --primary-color-contrast-400-parts: #ffffff;
-    --primary-color-contrast-500-parts: #ffffff;
-    --primary-color-contrast-600-parts: #ffffff;
-    --primary-color-contrast-700-parts: #ffffff;
-    --primary-color-contrast-800-parts: #ffffff;
-    --primary-color-contrast-900-parts: #ffffff;
-    --primary-color-contrast-A100-parts: #000000;
-    --primary-color-contrast-A200-parts: #000000;
-    --primary-color-contrast-A400-parts: #000000;
-    --primary-color-contrast-A700-parts: #000000;
+    --primary-color-A200-parts: #E4E9FF;
+    --primary-color-A400-parts: #B1C0FF;
+    --primary-color-A700-parts: #97ACFF;
+    --primary-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-400-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-500-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-600-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-700-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-800-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-900-parts: rgba(255, 255, 255, 1);
+    --primary-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --primary-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
     --accent-color-50-parts: #e0f2f1;
     --accent-color-100-parts: #b2dfdb;
@@ -57,34 +57,121 @@
     --accent-color-contrast-A400-parts: #000000;
     --accent-color-contrast-A700-parts: #000000;
 
-    --warn-color-50-parts: #ffebee;
-    --warn-color-100-parts: #ffcdd2;
-    --warn-color-200-parts: #ef9a9a;
-    --warn-color-300-parts: #e57373;
-    --warn-color-400-parts: #ef5350;
-    --warn-color-500-parts: #f44336;
-    --warn-color-600-parts: #e53935;
-    --warn-color-700-parts: #d32f2f;
-    --warn-color-800-parts: #c62828;
-    --warn-color-900-parts: #b71c1c;
-    --warn-color-A100-parts: #ff8a80;
-    --warn-color-A200-parts: #ff5252;
-    --warn-color-A400-parts: #ff1744;
-    --warn-color-A700-parts: #d50000;
-    --warn-color-contrast-50-parts: #000000;
-    --warn-color-contrast-100-parts: #000000;
-    --warn-color-contrast-200-parts: #000000;
-    --warn-color-contrast-300-parts: #000000;
-    --warn-color-contrast-400-parts: #000000;
-    --warn-color-contrast-500-parts: #ffffff;
-    --warn-color-contrast-600-parts: #ffffff;
-    --warn-color-contrast-700-parts: #ffffff;
-    --warn-color-contrast-800-parts: #ffffff;
-    --warn-color-contrast-900-parts: #ffffff;
-    --warn-color-contrast-A100-parts: #000000;
-    --warn-color-contrast-A200-parts: #ffffff;
-    --warn-color-contrast-A400-parts: #ffffff;
-    --warn-color-contrast-A700-parts: #ffffff;
+    --warn-color-50-parts: #fdf3e7;
+    --warn-color-100-parts: #fbe1c3;
+    --warn-color-200-parts: #f9ce9c;
+    --warn-color-300-parts: #f6ba74;
+    --warn-color-400-parts: #f4ab56;
+    --warn-color-500-parts: #f29c38;
+    --warn-color-600-parts: #f09432;
+    --warn-color-700-parts: #ee8a2b;
+    --warn-color-800-parts: #ec8024;
+    --warn-color-900-parts: #e86e17;
+    --warn-color-A100-parts: #ffffff;
+    --warn-color-A200-parts: #fff0e6;
+    --warn-color-A400-parts: #ffd0b3;
+    --warn-color-A700-parts: #ffc19a;
+    --warn-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-400-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-500-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-600-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-700-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-800-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-900-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --warn-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --info-color-50-parts: #e7f3fb;
+    --info-color-100-parts: #c2e0f4;
+    --info-color-200-parts: #9acced;
+    --info-color-300-parts: #71b7e6;
+    --info-color-400-parts: #52a7e0;
+    --info-color-500-parts: #3498db;
+    --info-color-600-parts: #2f90d7;
+    --info-color-700-parts: #2785d2;
+    --info-color-800-parts: #217bcd;
+    --info-color-900-parts: #156ac4;
+    --info-color-A100-parts: #f5f9ff;
+    --info-color-A200-parts: #c2ddff;
+    --info-color-A400-parts: #8fc1ff;
+    --info-color-A700-parts: #75b3ff;
+    --info-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-400-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-500-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-600-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-700-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-800-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-900-parts: rgba(255, 255, 255, 1);
+    --info-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --info-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --success-color-50-parts: #edf5eb;
+    --success-color-100-parts: #d1e6ce;
+    --success-color-200-parts: #b3d6ae;
+    --success-color-300-parts: #95c58d;
+    --success-color-400-parts: #7eb874;
+    --success-color-500-parts: #67ac5c;
+    --success-color-600-parts: #5fa554;
+    --success-color-700-parts: #549b4a;
+    --success-color-800-parts: #4a9241;
+    --success-color-900-parts: #398230;
+    --success-color-A100-parts: #d0ffcb;
+    --success-color-A200-parts: #a2ff98;
+    --success-color-A400-parts: #74ff65;
+    --success-color-A700-parts: #5dff4c;
+    --success-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-400-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-500-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-600-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-700-parts: rgba(255, 255, 255, 1);
+    --success-color-contrast-800-parts: rgba(255, 255, 255, 1);
+    --success-color-contrast-900-parts: rgba(255, 255, 255, 1);
+    --success-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --success-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --error-color-50-parts: #fceae8;
+    --error-color-100-parts: #f8c9c5;
+    --error-color-200-parts: #f3a69e;
+    --error-color-300-parts: #ee8277;
+    --error-color-400-parts: #eb6759;
+    --error-color-500-parts: #e74c3c;
+    --error-color-600-parts: #e44536;
+    --error-color-700-parts: #e03c2e;
+    --error-color-800-parts: #dd3327;
+    --error-color-900-parts: #d7241a;
+    --error-color-A100-parts: #ffffff;
+    --error-color-A200-parts: #ffd9d7;
+    --error-color-A400-parts: #ffa8a4;
+    --error-color-A700-parts: #ff8f8b;
+    --error-color-contrast-50-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-100-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-200-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-300-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-400-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-500-parts: rgba(255, 255, 255, 1);
+    --error-color-contrast-600-parts: rgba(255, 255, 255, 1);
+    --error-color-contrast-700-parts: rgba(255, 255, 255, 1);
+    --error-color-contrast-800-parts: rgba(255, 255, 255, 1);
+    --error-color-contrast-900-parts: rgba(255, 255, 255, 1);
+    --error-color-contrast-A100-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
+    --error-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 }
 
 $arm-primary: (
@@ -184,4 +271,103 @@ $arm-warn: (
         A400: var(--warn-color-contrast-A400-parts),
         A700: var(--warn-color-contrast-A700-parts),
     ),
-);
+);
+
+$arm-info: (
+    50: var(--info-color-50-parts),
+    100: var(--info-color-100-parts),
+    200: var(--info-color-200-parts),
+    300: var(--info-color-300-parts),
+    400: var(--info-color-400-parts),
+    500: var(--info-color-500-parts),
+    600: var(--info-color-600-parts),
+    700: var(--info-color-700-parts),
+    800: var(--info-color-800-parts),
+    900: var(--info-color-900-parts),
+    A100: var(--info-color-A100-parts),
+    A200: var(--info-color-A200-parts),
+    A400: var(--info-color-A400-parts),
+    A700: var(--info-color-A700-parts),
+    contrast: (
+        50: var(--info-color-contrast-50-parts),
+        100: var(--info-color-contrast-100-parts),
+        200: var(--info-color-contrast-200-parts),
+        300: var(--info-color-contrast-300-parts),
+        400: var(--info-color-contrast-400-parts),
+        500: var(--info-color-contrast-500-parts),
+        600: var(--info-color-contrast-600-parts),
+        700: var(--info-color-contrast-700-parts),
+        800: var(--info-color-contrast-800-parts),
+        900: var(--info-color-contrast-900-parts),
+        A100: var(--info-color-contrast-A100-parts),
+        A200: var(--info-color-contrast-A200-parts),
+        A400: var(--info-color-contrast-A400-parts),
+        A700: var(--info-color-contrast-A700-parts),
+    ),
+);
+
+$arm-success: (
+    50: var(--success-color-50-parts),
+    100: var(--success-color-100-parts),
+    200: var(--success-color-200-parts),
+    300: var(--success-color-300-parts),
+    400: var(--success-color-400-parts),
+    500: var(--success-color-500-parts),
+    600: var(--success-color-600-parts),
+    700: var(--success-color-700-parts),
+    800: var(--success-color-800-parts),
+    900: var(--success-color-900-parts),
+    A100: var(--success-color-A100-parts),
+    A200: var(--success-color-A200-parts),
+    A400: var(--success-color-A400-parts),
+    A700: var(--success-color-A700-parts),
+    contrast: (
+        50: var(--success-color-contrast-50-parts),
+        100: var(--success-color-contrast-100-parts),
+        200: var(--success-color-contrast-200-parts),
+        300: var(--success-color-contrast-300-parts),
+        400: var(--success-color-contrast-400-parts),
+        500: var(--success-color-contrast-500-parts),
+        600: var(--success-color-contrast-600-parts),
+        700: var(--success-color-contrast-700-parts),
+        800: var(--success-color-contrast-800-parts),
+        900: var(--success-color-contrast-900-parts),
+        A100: var(--success-color-contrast-A100-parts),
+        A200: var(--success-color-contrast-A200-parts),
+        A400: var(--success-color-contrast-A400-parts),
+        A700: var(--success-color-contrast-A700-parts),
+    ),
+);
+
+$arm-error: (
+    50: var(--error-color-50-parts),
+    100: var(--error-color-100-parts),
+    200: var(--error-color-200-parts),
+    300: var(--error-color-300-parts),
+    400: var(--error-color-400-parts),
+    500: var(--error-color-500-parts),
+    600: var(--error-color-600-parts),
+    700: var(--error-color-700-parts),
+    800: var(--error-color-800-parts),
+    900: var(--error-color-900-parts),
+    A100: var(--error-color-A100-parts),
+    A200: var(--error-color-A200-parts),
+    A400: var(--error-color-A400-parts),
+    A700: var(--error-color-A700-parts),
+    contrast: (
+        50: var(--error-color-contrast-50-parts),
+        100: var(--error-color-contrast-100-parts),
+        200: var(--error-color-contrast-200-parts),
+        300: var(--error-color-contrast-300-parts),
+        400: var(--error-color-contrast-400-parts),
+        500: var(--error-color-contrast-500-parts),
+        600: var(--error-color-contrast-600-parts),
+        700: var(--error-color-contrast-700-parts),
+        800: var(--error-color-contrast-800-parts),
+        900: var(--error-color-contrast-900-parts),
+        A100: var(--error-color-contrast-A100-parts),
+        A200: var(--error-color-contrast-A200-parts),
+        A400: var(--error-color-contrast-A400-parts),
+        A700: var(--error-color-contrast-A700-parts),
+    ),
+);

package/assets/styles/material-overrides.scss

@@ -2,16 +2,20 @@
 @import "./arm-theme.scss";
 
 @include mat-core();
+
 $main-theme-primary: mat-palette($arm-primary);
 $main-theme-accent: mat-palette($arm-accent);
 $main-theme-warn: mat-palette($arm-warn);
+$main-theme-info: mat-palette($arm-info);
+$main-theme-success: mat-palette($arm-success);
+$main-theme-error: mat-palette($arm-error);
 $main-dark-gray: #646464;
 $main-dark-disabled: #4f4f4f;
 $main-theme: mat-light-theme($main-theme-primary, $main-theme-accent, $main-theme-warn);
 $main-dark: mat-dark-theme($main-theme-primary, $main-theme-accent, $main-theme-warn);
 
 body {
-    letter-spacing: 1px;
+    letter-spacing: 0px;
     font-family: "Poppins", sans-serif !important;
     font-size: 14px;
     @include angular-material-theme($main-theme);