diff --git a/src/app/settings/about/about.component.ts b/src/app/settings/about/about.component.ts
index b925cd9..7792aeb 100644
--- a/src/app/settings/about/about.component.ts
+++ b/src/app/settings/about/about.component.ts
@@ -2,9 +2,10 @@ import { Component, VERSION } from '@angular/core';
import packageInfo from '../../../../package.json';
@Component({
- selector: 'app-about',
- templateUrl: './about.component.html',
- styleUrls: ['./about.component.scss'],
+ selector: 'app-about',
+ templateUrl: './about.component.html',
+ styleUrls: ['./about.component.scss'],
+ standalone: false
})
export class AboutComponent {
/**
diff --git a/src/app/settings/changelog/changelog.component.html b/src/app/settings/changelog/changelog.component.html
index 1ea3079..c04db02 100644
--- a/src/app/settings/changelog/changelog.component.html
+++ b/src/app/settings/changelog/changelog.component.html
@@ -6,7 +6,7 @@
-
+
diff --git a/src/app/settings/changelog/changelog.component.scss b/src/app/settings/changelog/changelog.component.scss
index 194bd62..1f55f3f 100644
--- a/src/app/settings/changelog/changelog.component.scss
+++ b/src/app/settings/changelog/changelog.component.scss
@@ -1,7 +1,7 @@
.container-cs {
.fluid-container {
height: 800px;
- .mat-card-content {
+ .mat-mdc-card-content {
margin-top: 0 !important;
}
}
diff --git a/src/app/settings/changelog/changelog.component.ts b/src/app/settings/changelog/changelog.component.ts
index f713ef3..8faf283 100644
--- a/src/app/settings/changelog/changelog.component.ts
+++ b/src/app/settings/changelog/changelog.component.ts
@@ -1,7 +1,8 @@
import { Component } from '@angular/core';
@Component({
- selector: 'app-changelog',
- templateUrl: './changelog.component.html',
+ selector: 'app-changelog',
+ templateUrl: './changelog.component.html',
+ standalone: false
})
export class ChangelogComponent {}
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index fd11d21..224415a 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -18,9 +18,10 @@ import { SidenavServiceService } from '../shared/services/sidenav-service.servic
const SMALL_WIDTH_BREAKPOINT = 1280;
@Component({
- selector: 'app-settings',
- templateUrl: './settings.component.html',
- animations: [routeAnimations],
+ selector: 'app-settings',
+ templateUrl: './settings.component.html',
+ animations: [routeAnimations],
+ standalone: false
})
export class SettingsComponent implements OnInit, AfterViewChecked {
/**
diff --git a/src/app/shared/components/avatar-bar/avatar-bar.component.ts b/src/app/shared/components/avatar-bar/avatar-bar.component.ts
index d59c01d..73ba095 100644
--- a/src/app/shared/components/avatar-bar/avatar-bar.component.ts
+++ b/src/app/shared/components/avatar-bar/avatar-bar.component.ts
@@ -5,8 +5,9 @@ import { SidenavServiceService } from '../../services/sidenav-service.service';
* Avatar Bar Component
*/
@Component({
- selector: 'app-avatar-bar',
- templateUrl: './avatar-bar.component.html',
+ selector: 'app-avatar-bar',
+ templateUrl: './avatar-bar.component.html',
+ standalone: false
})
export class AvatarBarComponent implements OnInit {
/**
diff --git a/src/app/shared/components/avatar/avatar.component.ts b/src/app/shared/components/avatar/avatar.component.ts
index 1ca2996..5c1d26f 100644
--- a/src/app/shared/components/avatar/avatar.component.ts
+++ b/src/app/shared/components/avatar/avatar.component.ts
@@ -5,9 +5,10 @@ import { Md5 } from './Md5';
* Avatar Component
*/
@Component({
- selector: 'app-avatar',
- templateUrl: './avatar.component.html',
- styleUrls: ['./avatar.component.scss'],
+ selector: 'app-avatar',
+ templateUrl: './avatar.component.html',
+ styleUrls: ['./avatar.component.scss'],
+ standalone: false
})
export class AvatarComponent implements OnInit, OnChanges {
/**
diff --git a/src/app/shared/components/loader/loader.component.scss b/src/app/shared/components/loader/loader.component.scss
index dfe053d..42e67eb 100644
--- a/src/app/shared/components/loader/loader.component.scss
+++ b/src/app/shared/components/loader/loader.component.scss
@@ -2,7 +2,7 @@
position: fixed;
z-index: 99999;
- &.mat-progress-bar {
+ &.mat-mdc-progress-bar {
height: 3px;
}
}
diff --git a/src/app/shared/components/loader/loader.component.ts b/src/app/shared/components/loader/loader.component.ts
index 5606d57..b6eb1be 100644
--- a/src/app/shared/components/loader/loader.component.ts
+++ b/src/app/shared/components/loader/loader.component.ts
@@ -8,9 +8,10 @@ import { ProgressBarMode } from '@angular/material/progress-bar';
* Loader Component
*/
@Component({
- selector: 'app-loader',
- templateUrl: './loader.component.html',
- styleUrls: ['./loader.component.scss'],
+ selector: 'app-loader',
+ templateUrl: './loader.component.html',
+ styleUrls: ['./loader.component.scss'],
+ standalone: false
})
export class LoaderComponent implements AfterViewChecked {
/**
diff --git a/src/app/store/reducers/index.ts b/src/app/store/reducers/index.ts
index 2a34042..9e4c541 100644
--- a/src/app/store/reducers/index.ts
+++ b/src/app/store/reducers/index.ts
@@ -62,7 +62,7 @@ export const {
selectRouteParam, // factory function to select a route param
selectRouteData, // select the current route data
selectUrl, // select the current url
-} = fromRouter.getSelectors(getRouterState);
+} = fromRouter.getRouterSelectors(getRouterState);
/**
* Custom Route Seralizer
diff --git a/src/scss/app_styles.scss b/src/scss/app_styles.scss
index 2120878..f567f3c 100644
--- a/src/scss/app_styles.scss
+++ b/src/scss/app_styles.scss
@@ -1,4 +1,4 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
@mixin app-style-theme($theme, $colors) {
$primary: map-get($theme, primary);
@@ -39,7 +39,7 @@
}
h1 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
color: map-get($colors, header-1);
margin-bottom: 2%;
@@ -50,14 +50,14 @@
}
h2 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
font-weight: lighter;
font-size: 2rem;
color: map-get($colors, header-2);
}
h3 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
white-space: nowrap;
flex: 1;
color: map-get($colors, header-3);
@@ -66,7 +66,7 @@
}
h5 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
font-size: 16px;
}
@@ -75,11 +75,11 @@
}
a {
- color: mat-color($primary);
+ color: mat.get-theme-color($theme, primary);
}
a:hover {
- color: mat-color($accent);
+ color: mat.get-theme-color($theme, accent);
}
.spacer {
@@ -89,7 +89,7 @@
.btn {
margin-top: -1%;
border-radius: 39px;
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
padding: 0.25em 2em 0.25em 2em;
color: white;
}
@@ -130,7 +130,8 @@
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
-
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
mat-card {
box-shadow: none !important;
margin-right: 5%;
@@ -138,15 +139,16 @@
@media (max-width: 720px) {
margin-right: unset;
}
-
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
mat-card-title {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
white-space: nowrap;
}
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
mat-card-content {
margin-top: 5%;
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
}
}
@@ -185,11 +187,11 @@
}
.primary {
- color: mat-color($primary);
+ color: mat.get-theme-color($theme, primary);
}
.accent {
- color: mat-color($accent);
+ color: mat.get-theme-color($theme, accent);
}
.container-default {
@@ -205,6 +207,7 @@
h2 {
font-weight: initial;
}
+
hr {
border-top-color: map-get($colors, avatar-bar);
}
diff --git a/src/scss/avatar-bar-style.scss b/src/scss/avatar-bar-style.scss
index 95b6961..0f1d298 100644
--- a/src/scss/avatar-bar-style.scss
+++ b/src/scss/avatar-bar-style.scss
@@ -1,5 +1,3 @@
-@import '@angular/material/theming';
-
@mixin avatar-bar-theme($theme, $colors) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
@@ -8,6 +6,7 @@
.avatar-circle {
cursor: pointer;
}
+
mat-toolbar {
margin-top: 0;
padding-right: 1%;
@@ -22,7 +21,7 @@
p {
margin-top: 1%;
margin-bottom: 1%;
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
font-weight: lighter;
color: map-get($colors, avatar-bar);
font-size: 1rem;
@@ -65,14 +64,14 @@
max-width: 350px;
h6 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
margin: 0;
font-size: 0.9em;
font-weight: bold;
}
small {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
color: map-get($colors, text);
}
@@ -81,8 +80,8 @@
justify-content: center;
.notification-row {
- padding: 8px 0px 4px;
- margin: 5px 0px;
+ padding: 8px 0 4px;
+ margin: 5px 0;
transition: 0.6s;
.delete-notification {
diff --git a/src/scss/main-sidenav-style.scss b/src/scss/main-sidenav-style.scss
index 9271abc..f28cb1d 100644
--- a/src/scss/main-sidenav-style.scss
+++ b/src/scss/main-sidenav-style.scss
@@ -1,4 +1,4 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
@mixin main-sidenav-theme($theme, $colors) {
$primary: map-get($theme, primary);
@@ -49,8 +49,8 @@
}
.is-active {
- color: mat-color($accent) !important;
- text-shadow: 0px 0px 8px mat-color($accent);
+ color: mat.get-theme-color($theme, primary) !important;
+ text-shadow: 0 0 8px mat.get-theme-color($theme, accent);
// Add an active/current color
}
}
diff --git a/src/scss/secondary-sidenav-style.scss b/src/scss/secondary-sidenav-style.scss
index 169c94a..cb53ebe 100644
--- a/src/scss/secondary-sidenav-style.scss
+++ b/src/scss/secondary-sidenav-style.scss
@@ -1,4 +1,4 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
@mixin secondary-sidenav-theme($theme, $colors) {
$primary: map-get($theme, primary);
@@ -25,7 +25,7 @@
background-color: map-get($colors, container-background);
.module-name {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
display: inline-block;
padding-left: 11%;
padding-top: 11%;
@@ -40,6 +40,8 @@
color: map-get($colors, header-2);
}
+ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
+ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
mat-list {
padding-left: 5%;
@@ -51,12 +53,13 @@
cursor: pointer;
}
+ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
mat-list-item {
outline: none;
height: 45px;
h5 {
- font-family: 'Montserrat', Sans-serif;
+ font-family: 'Montserrat', Sans-serif, serif;
color: map-get($colors, header-5);
font-size: 0.9em;
}
@@ -82,10 +85,10 @@
}
.is-active {
- background-color: mat-color($accent) !important;
+ background-color: mat.get-theme-color($theme, accent) !important;
border-top-left-radius: 39px;
border-bottom-left-radius: 39px;
- box-shadow: 0 0 8px mat-color($accent);
+ box-shadow: 0 0 8px mat.get-theme-color($theme, accent);
outline: none;
// Add an active/current color
diff --git a/src/styles.scss b/src/styles.scss
index ea8277e..ac2674d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,7 +8,17 @@
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
-@include mat.core();
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+// The following line adds:
+// 1. Default typography styles for all components
+// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+// If you specify typography styles for the components you use elsewhere, you should delete this line.
+// If you don't need the default component typographies but still want the hierarchy styles,
+// you can delete this line and instead use:
+// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.elevation-classes();
+@include mat.app-background();
// Define the default theme (same as the example above).
@import './themes/default-theme.scss';
@@ -16,7 +26,7 @@
// Local Imports
@import './scss/colors.scss';
-@import '~material-design-icons/iconfont/material-icons.css';
+@import 'material-design-icons/iconfont/material-icons.css';
// Import other mixins
@import './scss/main-sidenav-style.scss';
@@ -73,36 +83,41 @@ input[type='number']::-webkit-outer-spin-button {
body {
.black-theme {
- .mat-card,
+ .mat-mdc-card,
.mat-expansion-panel,
- .mat-paginator,
+ .mat-mdc-paginator,
.mat-drawer-container {
background-color: transparent;
}
- .mat-table {
+
+ .mat-mdc-table {
background-color: map-get($colors-dark-theme, container-background);
}
- .mat-dialog-container {
+
+ .mat-mdc-dialog-container {
background-color: map-get($colors-dark-theme, container-background);
}
}
+
.default-theme {
.mat-drawer-container {
background-color: transparent;
}
- .mat-dialog-container {
+
+ .mat-mdc-dialog-container {
background-color: map-get($colors-default-theme, container-background);
}
}
+
.black-theme,
.default-theme {
- .mat-snack-bar-container {
+ .mat-mdc-snack-bar-container {
color: #ffeded !important;
background-color: #424242 !important;
- .mat-simple-snackbar {
- .mat-button {
- color: mat-color(map-get($candy-app-theme, accent));
+ .mat-mdc-simple-snack-bar {
+ .mat-mdc-button {
+ color: mat.get-theme-color($candy-app-theme, accent);
}
}
}
diff --git a/src/test.ts b/src/test.ts
index bdfb6be..94c5c76 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -7,25 +7,9 @@ import {
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
-declare const require: {
- context(
- path: string,
- deep?: boolean,
- filter?: RegExp
- ): {
- keys(): string[];
- (id: string): T;
- };
-};
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{ teardown: { destroyAfterEach: true } }
);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);
diff --git a/src/themes/dark-theme.scss b/src/themes/dark-theme.scss
index 65fbb58..33bc86a 100644
--- a/src/themes/dark-theme.scss
+++ b/src/themes/dark-theme.scss
@@ -1,9 +1,9 @@
@use '@angular/material' as mat;
-$dark-primary: mat.define-palette(mat.$blue-palette);
-$dark-accent: mat.define-palette(mat.$red-palette, 700);
-$dark-warn: mat.define-palette(mat.$red-palette, 500);
-$black-theme: mat.define-dark-theme(
+$dark-primary: mat.m2-define-palette(mat.$m2-blue-palette);
+$dark-accent: mat.m2-define-palette(mat.$m2-red-palette, 700);
+$dark-warn: mat.m2-define-palette(mat.$m2-red-palette, 500);
+$black-theme: mat.m2-define-dark-theme(
(
color: (
primary: $dark-primary,
diff --git a/src/themes/default-theme.scss b/src/themes/default-theme.scss
index 6bf2f39..6131fc7 100644
--- a/src/themes/default-theme.scss
+++ b/src/themes/default-theme.scss
@@ -1,9 +1,9 @@
@use '@angular/material' as mat;
-$candy-app-primary: mat.define-palette(mat.$blue-palette);
-$candy-app-accent: mat.define-palette(mat.$red-palette, 700);
-$candy-app-warn: mat.define-palette(mat.$red-palette, 500);
-$candy-app-theme: mat.define-light-theme(
+$candy-app-primary: mat.m2-define-palette(mat.$m2-blue-palette);
+$candy-app-accent: mat.m2-define-palette(mat.$m2-red-palette, 700);
+$candy-app-warn: mat.m2-define-palette(mat.$m2-red-palette, 500);
+$candy-app-theme: mat.m2-define-light-theme(
(
color: (
primary: $candy-app-primary,
diff --git a/tsconfig.json b/tsconfig.json
index 427c7df..16e8481 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,19 +6,22 @@
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
+ "esModuleInterop": true,
"noImplicitReturns": true,
"resolveJsonModule": true,
- "allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
- "downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es2020",
+ "target": "ES2022",
"module": "es2020",
- "lib": ["es2018", "dom"]
+ "lib": [
+ "es2018",
+ "dom"
+ ],
+ "useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,