Skip to content
This repository was archived by the owner on Feb 3, 2024. It is now read-only.

Commit 8c24a59

Browse files
GabDugGabDug
committed
chore: angular 17
1 parent 89a5634 commit 8c24a59

File tree

9 files changed

+1932
-2354
lines changed

9 files changed

+1932
-2354
lines changed

‎angular.json‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,14 @@
2222
"main": "src/main.ts",
2323
"polyfills": "src/polyfills.ts",
2424
"tsConfig": "tsconfig.app.json",
25-
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
26-
"styles": ["src/styles.scss"],
25+
"assets": [
26+
"src/favicon.ico",
27+
"src/assets",
28+
"src/manifest.webmanifest"
29+
],
30+
"styles": [
31+
"src/styles.scss"
32+
],
2733
"scripts": [],
2834
"vendorChunk": true,
2935
"extractLicenses": false,
@@ -67,18 +73,18 @@
6773
"serve": {
6874
"builder": "@angular-devkit/build-angular:dev-server",
6975
"options": {
70-
"browserTarget": "NgMatIcons:build"
76+
"buildTarget": "NgMatIcons:build"
7177
},
7278
"configurations": {
7379
"production": {
74-
"browserTarget": "NgMatIcons:build:production"
80+
"buildTarget": "NgMatIcons:build:production"
7581
}
7682
}
7783
},
7884
"extract-i18n": {
7985
"builder": "@angular-devkit/build-angular:extract-i18n",
8086
"options": {
81-
"browserTarget": "NgMatIcons:build"
87+
"buildTarget": "NgMatIcons:build"
8288
}
8389
},
8490
"test": {
@@ -88,16 +94,28 @@
8894
"polyfills": "src/polyfills.ts",
8995
"tsConfig": "tsconfig.spec.json",
9096
"karmaConfig": "karma.conf.js",
91-
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
92-
"styles": ["src/styles.scss"],
97+
"assets": [
98+
"src/favicon.ico",
99+
"src/assets",
100+
"src/manifest.webmanifest"
101+
],
102+
"styles": [
103+
"src/styles.scss"
104+
],
93105
"scripts": []
94106
}
95107
},
96108
"lint": {
97109
"builder": "@angular-devkit/build-angular:tslint",
98110
"options": {
99-
"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
100-
"exclude": ["**/node_modules/**"]
111+
"tsConfig": [
112+
"tsconfig.app.json",
113+
"tsconfig.spec.json",
114+
"e2e/tsconfig.json"
115+
],
116+
"exclude": [
117+
"**/node_modules/**"
118+
]
101119
}
102120
},
103121
"e2e": {
@@ -116,6 +134,6 @@
116134
}
117135
},
118136
"cli": {
119-
"analytics": false
137+
"analytics": false
120138
}
121139
}

‎package.json‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,30 @@
2222
"yarn": ">=1.20.0"
2323
},
2424
"dependencies": {
25-
"@angular/animations": "^16.2.12",
26-
"@angular/cdk": "^16.2.14",
27-
"@angular/common": "^16.2.12",
28-
"@angular/compiler": "^16.2.12",
29-
"@angular/core": "^16.2.12",
30-
"@angular/forms": "^16.2.12",
31-
"@angular/material": "^16.2.14",
32-
"@angular/platform-browser": "^16.2.12",
33-
"@angular/platform-browser-dynamic": "^16.2.12",
34-
"@angular/router": "^16.2.12",
35-
"@angular/service-worker": "^16.2.12",
25+
"@angular/animations": "^17.1.2",
26+
"@angular/cdk": "^17.1.2",
27+
"@angular/common": "^17.1.2",
28+
"@angular/compiler": "^17.1.2",
29+
"@angular/core": "^17.1.2",
30+
"@angular/forms": "^17.1.2",
31+
"@angular/material": "^17.1.2",
32+
"@angular/platform-browser": "^17.1.2",
33+
"@angular/platform-browser-dynamic": "^17.1.2",
34+
"@angular/router": "^17.1.2",
35+
"@angular/service-worker": "^17.1.2",
3636
"@commitlint/cli": "^12.1.4",
3737
"@commitlint/config-conventional": "^12.1.4",
3838
"prettier": "^2.3.0",
3939
"pretty-quick": "^3.1.0",
4040
"rxjs": "~6.6.3",
4141
"standard-version": "^9.3.0",
4242
"tslib": "^2.2.0",
43-
"zone.js": "~0.13.3"
43+
"zone.js": "~0.14.3"
4444
},
4545
"devDependencies": {
46-
"@angular-devkit/build-angular": "^16.2.12",
47-
"@angular/cli": "^16.2.12",
48-
"@angular/compiler-cli": "^16.2.12",
46+
"@angular-devkit/build-angular": "^17.1.2",
47+
"@angular/cli": "^17.1.2",
48+
"@angular/compiler-cli": "^17.1.2",
4949
"@types/jasmine": "~3.7.4",
5050
"@types/jasminewd2": "~2.0.9",
5151
"@types/node": "^20.11.16",
@@ -61,7 +61,7 @@
6161
"protractor": "~7.0.0",
6262
"ts-node": "~9.1.1",
6363
"tslint": "~6.1.0",
64-
"typescript": "~4.9.5"
64+
"typescript": "~5.3.3"
6565
},
6666
"husky": {
6767
"hooks": {

‎src/app/app.component.html‎

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,51 @@
44
class="main-container"
55
>
66
<section *ngIf="!isSmallScreen" class="filter-container">
7-
<mat-form-field class="filter-search-field" floatLabel="never">
7+
<mat-form-field appearance="outline">
8+
<mat-label>Filter by name</mat-label>
89
<button mat-icon-button matPrefix aria-hidden="true">
910
<mat-icon aria-hidden="true">search</mat-icon>
1011
</button>
11-
<input [(ngModel)]="term" matInput placeholder="Filter by name" type="text" />
12+
<input [(ngModel)]="term" matInput type="text" />
1213
</mat-form-field>
1314
<mat-nav-list>
1415
<h3>Theme</h3>
15-
<mat-list-item (click)="iconStyle = ''" [class.active-theme]="iconStyle === ''">Regular</mat-list-item>
16-
<mat-list-item
17-
(click)="iconStyle = 'library-outlined'"
18-
[class.active-theme]="iconStyle === 'library-outlined'"
16+
<mat-list-item (click)="iconStyle = ''" [activated]="iconStyle === ''">Regular</mat-list-item>
17+
<mat-list-item (click)="iconStyle = 'library-outlined'" [activated]="iconStyle === 'library-outlined'"
1918
>Outlined
2019
</mat-list-item>
21-
<mat-list-item (click)="iconStyle = 'library-sharp'" [class.active-theme]="iconStyle === 'library-sharp'"
20+
<mat-list-item (click)="iconStyle = 'library-sharp'" [activated]="iconStyle === 'library-sharp'"
2221
>Sharp
2322
</mat-list-item>
24-
<mat-list-item
25-
(click)="iconStyle = 'library-two-tone'"
26-
[class.active-theme]="iconStyle === 'library-two-tone'"
23+
<mat-list-item (click)="iconStyle = 'library-two-tone'" [activated]="iconStyle === 'library-two-tone'"
2724
>Two Tone
2825
</mat-list-item>
29-
<mat-list-item (click)="iconStyle = 'library-round'" [class.active-theme]="iconStyle === 'library-round'"
26+
<mat-list-item (click)="iconStyle = 'library-round'" [activated]="iconStyle === 'library-round'"
3027
>Round
3128
</mat-list-item>
3229
</mat-nav-list>
33-
<mat-form-field class="filter-category-field">
34-
<h3 id="category-label">Category</h3>
35-
<mat-select [(ngModel)]="category" aria-labelledby="category-label">
36-
<mat-option value="" aria-label="All">All</mat-option>
37-
<mat-option value="unsorted" aria-label="Unsorted">Unsorted</mat-option>
38-
<mat-option value="action" aria-label="Action">Action</mat-option>
39-
<mat-option value="alert" aria-label="Alert">Alert</mat-option>
40-
<mat-option value="av" aria-label="Av">Av</mat-option>
41-
<mat-option value="communication" aria-label="Communication">Communication</mat-option>
42-
<mat-option value="content" aria-label="Content">Content</mat-option>
43-
<mat-option value="device" aria-label="Device">Device</mat-option>
44-
<mat-option value="editor" aria-label="Editor">Editor</mat-option>
45-
<mat-option value="file" aria-label="File">File</mat-option>
46-
<mat-option value="hardware" aria-label="Hardware">Hardware</mat-option>
47-
<mat-option value="home" aria-label="Home">Home</mat-option>
48-
<mat-option value="image" aria-label="Image">Image</mat-option>
49-
<mat-option value="maps" aria-label="Maps">Maps</mat-option>
50-
<mat-option value="navigation" aria-label="Navigation">Navigation</mat-option>
51-
<mat-option value="notification" aria-label="Notification">Notification</mat-option>
52-
<mat-option value="places" aria-label="Places">Places</mat-option>
53-
<mat-option value="social" aria-label="Social">Social</mat-option>
54-
<mat-option value="toggle" aria-label="Toggle">Toggle</mat-option>
55-
</mat-select>
56-
</mat-form-field>
30+
<h3 id="category-label">Category</h3>
31+
<mat-select [(ngModel)]="category" aria-labelledby="category-label">
32+
<mat-option value="" aria-label="All">All</mat-option>
33+
<mat-option value="unsorted" aria-label="Unsorted">Unsorted</mat-option>
34+
<mat-option value="action" aria-label="Action">Action</mat-option>
35+
<mat-option value="alert" aria-label="Alert">Alert</mat-option>
36+
<mat-option value="av" aria-label="Av">Av</mat-option>
37+
<mat-option value="communication" aria-label="Communication">Communication</mat-option>
38+
<mat-option value="content" aria-label="Content">Content</mat-option>
39+
<mat-option value="device" aria-label="Device">Device</mat-option>
40+
<mat-option value="editor" aria-label="Editor">Editor</mat-option>
41+
<mat-option value="file" aria-label="File">File</mat-option>
42+
<mat-option value="hardware" aria-label="Hardware">Hardware</mat-option>
43+
<mat-option value="home" aria-label="Home">Home</mat-option>
44+
<mat-option value="image" aria-label="Image">Image</mat-option>
45+
<mat-option value="maps" aria-label="Maps">Maps</mat-option>
46+
<mat-option value="navigation" aria-label="Navigation">Navigation</mat-option>
47+
<mat-option value="notification" aria-label="Notification">Notification</mat-option>
48+
<mat-option value="places" aria-label="Places">Places</mat-option>
49+
<mat-option value="social" aria-label="Social">Social</mat-option>
50+
<mat-option value="toggle" aria-label="Toggle">Toggle</mat-option>
51+
</mat-select>
5752
</section>
5853
<section *ngIf="isSmallScreen" class="filter-container-small">
5954
<mat-form-field class="filter-search-field" floatLabel="auto">

‎src/app/app.component.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.filter-container-small {
22
padding: 1rem;
33

4-
.filter-search-field {
5-
display: block;
6-
}
4+
// .filter-search-field {
5+
// display: block;
6+
// }
77

88
.filter-row {
99
display: flex;
@@ -30,16 +30,8 @@
3030
display: flex;
3131
flex-direction: column;
3232
margin: 0.75rem;
33+
margin-top: 1.25rem;
3334

34-
.filter-search-field {
35-
margin-left: 0.5rem;
36-
margin-right: 0.5rem;
37-
}
38-
39-
.filter-category-field {
40-
flex-grow: 1;
41-
margin-left: 6px;
42-
}
4335

4436
// Theme selector
4537
.mat-nav-list {
@@ -53,13 +45,15 @@
5345
}
5446
}
5547

56-
.active-theme {
57-
background: #48a697;
58-
color: white;
59-
}
48+
6049
}
6150
}
6251

52+
// mat-list-item[ng-reflect-activated=true] {
53+
// background: #48a697;
54+
// color: white;
55+
// }
56+
6357
main {
6458
width: 100%;
6559
}

‎src/app/app.module.ts‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { BrowserModule } from '@angular/platform-browser';
2-
import { NgModule } from '@angular/core';
3-
41
import { AppComponent } from './app.component';
52
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6-
import { ServiceWorkerModule } from '@angular/service-worker';
7-
import { environment } from '../environments/environment';
8-
import { MatIconModule } from '@angular/material/icon';
9-
import { IconItemComponent } from './icon-item/icon-item.component';
10-
import { FormsModule } from '@angular/forms';
11-
import { FilterPipe } from './filter.pipe';
12-
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
3+
import { BrowserModule } from '@angular/platform-browser';
134
import { ClipboardModule } from '@angular/cdk/clipboard';
14-
import { HeaderComponent } from './header/header.component';
15-
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
16-
import { FooterComponent } from './footer/footer.component';
17-
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
18-
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
19-
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
205
import { FilterCategoryPipe } from './filter-category.pipe';
21-
import { IconContainerComponent } from './icon-container/icon-container.component';
6+
import { FilterPipe } from './filter.pipe';
7+
import { FooterComponent } from './footer/footer.component';
8+
import { FormsModule } from '@angular/forms';
9+
import { HeaderComponent } from './header/header.component';
2210
import { HttpClientModule } from '@angular/common/http';
11+
import { IconContainerComponent } from './icon-container/icon-container.component';
12+
import { IconItemComponent } from './icon-item/icon-item.component';
13+
import { MatButtonModule } from '@angular/material/button';
14+
import { MatIconModule } from '@angular/material/icon';
15+
import { MatInputModule } from '@angular/material/input';
16+
import { MatListModule } from '@angular/material/list';
17+
import { MatSelectModule } from '@angular/material/select';
18+
import { MatSnackBarModule } from '@angular/material/snack-bar';
19+
import { NgModule } from '@angular/core';
20+
import { ServiceWorkerModule } from '@angular/service-worker';
21+
import { environment } from '../environments/environment';
22+
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
2323

2424
@NgModule({
2525
declarations: [
@@ -45,7 +45,9 @@ import { HttpClientModule } from '@angular/common/http';
4545
MatButtonModule,
4646
MatSelectModule,
4747
],
48-
providers: [],
48+
providers: [
49+
provideAnimationsAsync()
50+
],
4951
bootstrap: [AppComponent],
5052
})
5153
export class AppModule {}

‎src/app/icon-item/icon-item.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, Input, OnInit } from '@angular/core';
22

33
import { Clipboard } from '@angular/cdk/clipboard';
4-
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
54
import IconItem from '../icon';
5+
import { MatSnackBar } from '@angular/material/snack-bar';
66

77
@Component({
88
selector: 'app-icon-item',

‎src/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
"datePublished": "2020"
3131
}
3232
</script>
33-
</head>
33+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
34+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
35+
</head>
3436
<body class="mat-typography">
3537
<app-root></app-root>
3638
<noscript>Please enable JavaScript to continue using this application.</noscript>

0 commit comments

Comments
 (0)