wbrawner/twigs-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update to Angular Material 15

Browse source
This commit is contained in:
William Brawner 2024-03-03 10:29:25 -07:00
parent 262da7ef92
commit a38fafb451
5 changed files with 1684 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1741
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -3,7 +3,7 @@
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --host '0.0.0.0'", "start": "ng serve --configuration=production --host '0.0.0.0'",
"code-server": "ng serve --configuration=codeserver --host \"0.0.0.0\" --disable-host-check --poll=2000", "code-server": "ng serve --configuration=codeserver --host \"0.0.0.0\" --disable-host-check --poll=2000",
"build": "ng build", "build": "ng build",
"package": "ng build --configuration=production --service-worker", "package": "ng build --configuration=production --service-worker",
@ -16,12 +16,12 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^15.2.10", "@angular/animations": "^15.2.10",
"@angular/cdk": "^14.0.4", "@angular/cdk": "^15.2.9",
"@angular/common": "^15.2.10", "@angular/common": "^15.2.10",
"@angular/compiler": "^15.2.10", "@angular/compiler": "^15.2.10",
"@angular/core": "^15.2.10", "@angular/core": "^15.2.10",
"@angular/forms": "^15.2.10", "@angular/forms": "^15.2.10",
"@angular/material": "^14.0.4", "@angular/material": "^15.2.9",
"@angular/platform-browser": "^15.2.10", "@angular/platform-browser": "^15.2.10",
"@angular/platform-browser-dynamic": "^15.2.10", "@angular/platform-browser-dynamic": "^15.2.10",
"@angular/router": "^15.2.10", "@angular/router": "^15.2.10",

20
src/app/app.module.ts
View file

@ -2,20 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button'; import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatListModule } from '@angular/material/list'; import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatRadioModule } from '@angular/material/radio'; import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
import { MatSelectModule } from '@angular/material/select'; import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatCardModule } from '@angular/material/card'; import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { TransactionsComponent } from './transactions/transactions.component'; import { TransactionsComponent } from './transactions/transactions.component';

2
src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
View file

@ -4,7 +4,7 @@ import { TransactionType } from '../transaction.type';
import { Category } from 'src/app/categories/category'; import { Category } from 'src/app/categories/category';
import { AppComponent } from 'src/app/app.component'; import { AppComponent } from 'src/app/app.component';
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service'; import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
import { MatRadioChange } from '@angular/material/radio'; import { MatLegacyRadioChange as MatRadioChange } from '@angular/material/legacy-radio';
import { decimalToInteger } from 'src/app/shared/utils'; import { decimalToInteger } from 'src/app/shared/utils';
@Component({ @Component({

15
src/styles.scss
View file

@ -4,7 +4,16 @@
// Include the common styles for Angular Material. We include this here so that you only // 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. // have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once! // 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-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@ -23,8 +32,8 @@ $budget-dark-theme: mat.define-dark-theme($budget-app-primary, $budget-app-accen
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
@include mat.all-component-themes($budget-app-theme); @include mat.all-legacy-component-themes($budget-app-theme);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@include mat.all-component-themes($budget-dark-theme); @include mat.all-legacy-component-themes($budget-dark-theme);
} }