Skip to content

Commit 87ec980

Browse files
MatthboMatthbo
authored
Upgrade angular to v19 (#18)
1 parent 20b0d2a commit 87ec980

File tree

8 files changed

+2549
-2538
lines changed

8 files changed

+2549
-2538
lines changed

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,28 @@
1111
},
1212
"private": true,
1313
"dependencies": {
14-
"@angular/animations": "^18.2.6",
14+
"@angular/animations": "^19.1.4",
1515
"@angular/cdk": "^18.2.8",
16-
"@angular/common": "^18.2.6",
17-
"@angular/compiler": "^18.2.6",
18-
"@angular/core": "^18.2.6",
19-
"@angular/forms": "^18.2.6",
20-
"@angular/platform-browser": "^18.2.6",
21-
"@angular/platform-browser-dynamic": "^18.2.6",
22-
"@angular/router": "^18.2.6",
16+
"@angular/common": "^19.1.4",
17+
"@angular/compiler": "^19.1.4",
18+
"@angular/core": "^19.1.4",
19+
"@angular/forms": "^19.1.4",
20+
"@angular/platform-browser": "^19.1.4",
21+
"@angular/platform-browser-dynamic": "^19.1.4",
22+
"@angular/router": "^19.1.4",
2323
"rxjs": "~7.8.0",
2424
"tslib": "^2.7.0",
25-
"zone.js": "~0.14.10"
25+
"zone.js": "~0.15.0"
2626
},
2727
"devDependencies": {
28-
"@angular-devkit/build-angular": "^18.2.6",
28+
"@angular-devkit/build-angular": "^19.1.5",
2929
"@angular-eslint/builder": "^18.3.1",
3030
"@angular-eslint/eslint-plugin": "^18.3.1",
3131
"@angular-eslint/eslint-plugin-template": "^18.3.1",
3232
"@angular-eslint/schematics": "^18.3.1",
3333
"@angular-eslint/template-parser": "^18.3.1",
34-
"@angular/cli": "^18.2.6",
35-
"@angular/compiler-cli": "^18.2.6",
34+
"@angular/cli": "^19.1.5",
35+
"@angular/compiler-cli": "^19.1.4",
3636
"@types/jasmine": "~5.1.0",
3737
"@typescript-eslint/eslint-plugin": "^8.7.0",
3838
"@typescript-eslint/parser": "^8.7.0",
@@ -46,7 +46,7 @@
4646
"karma-coverage": "~2.2.0",
4747
"karma-jasmine": "~5.1.0",
4848
"karma-jasmine-html-reporter": "~2.1.0",
49-
"ng-packagr": "^18.2.1",
49+
"ng-packagr": "^19.1.2",
5050
"prettier": "^3.2.5",
5151
"typescript": "~5.5.4"
5252
},

‎pnpm-lock.yaml‎

Lines changed: 2478 additions & 2466 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/angular-components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121
},
2222
"peerDependencies": {
23-
"@angular/core": "^18.2.0",
24-
"@angular/cdk": "^18.2.0"
23+
"@angular/core": ">=18.2.0 <20.0.0",
24+
"@angular/cdk": ">=18.2.0 <20.0.0"
2525
}
2626
}

‎projects/angular-components/src/_index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:meta";
12
@forward "./styles/_light_theme.scss";
23

34
@font-face {
@@ -17,5 +18,5 @@
1718
}
1819

1920
body.ff-dark-theme {
20-
@import "./styles/_dark_theme.scss";
21+
@include meta.load-css("styles/_dark_theme");
2122
}

‎projects/angular-components/src/styles/_dark_theme.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
@import 'variables';
1+
@use 'variables';
22

33
ff-button > button {
44
&:disabled {
5-
color: $ff-color-gray;
6-
background-color: $ff-bgcolor-dark-gray;
5+
color: variables.$ff-color-gray;
6+
background-color: variables.$ff-bgcolor-dark-gray;
77
}
88

99
&.active {
10-
color: $ff-color-light;
11-
background-color: $ff-bgcolor-dark-gray;
10+
color: variables.$ff-color-light;
11+
background-color: variables.$ff-bgcolor-dark-gray;
1212

1313
&:hover {
14-
color: $ff-color-dark;
15-
background-color: $ff-bgcolor-yellow;
14+
color: variables.$ff-color-dark;
15+
background-color: variables.$ff-bgcolor-yellow;
1616
}
1717
}
1818
}
1919

2020
ff-search > label {
2121
background-color: #000;
22-
border: 1px solid $ff-border-gray;
22+
border: 1px solid variables.$ff-border-gray;
2323

2424
&.disabled {
25-
background-color: $ff-bgcolor-dark-gray;
25+
background-color: variables.$ff-bgcolor-dark-gray;
2626
}
2727
}
2828

2929
$ff-alert-dark-opacity: 0.3;
3030

3131
ff-alert > .ff-alert {
32-
color: $ff-color-light;
32+
color: variables.$ff-color-light;
3333

3434
&.info {
35-
background-color: hex-with-opacity($ff-alert-info, $ff-alert-dark-opacity);
35+
background-color: variables.hex-with-opacity(variables.$ff-alert-info, $ff-alert-dark-opacity);
3636
}
3737

3838
&.success {
39-
background-color: hex-with-opacity($ff-alert-success, $ff-alert-dark-opacity);
39+
background-color: variables.hex-with-opacity(variables.$ff-alert-success, $ff-alert-dark-opacity);
4040
}
4141

4242
&.warning {
43-
background-color: hex-with-opacity($ff-alert-warning, $ff-alert-dark-opacity);
43+
background-color: variables.hex-with-opacity(variables.$ff-alert-warning, $ff-alert-dark-opacity);
4444
}
4545

4646
&.error {
47-
background-color: hex-with-opacity($ff-alert-error, $ff-alert-dark-opacity);
47+
background-color: variables.hex-with-opacity(variables.$ff-alert-error, $ff-alert-dark-opacity);
4848
}
4949
}
5050

5151
ff-datatable>.dt-wrapper {
52-
color: $ff-color-light;
52+
color: variables.$ff-color-light;
5353
}

‎projects/angular-components/src/styles/_light_theme.scss‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'variables';
1+
@use 'variables';
22

33
ff-button *,
44
ff-search *,
@@ -10,107 +10,107 @@ ff-datatable * {
1010
}
1111

1212
ff-button > button {
13-
color: $ff-color-light;
14-
background-color: $ff-bgcolor-dark-gray;
13+
color: variables.$ff-color-light;
14+
background-color: variables.$ff-bgcolor-dark-gray;
1515

1616
&:hover {
17-
color: $ff-color-dark;
18-
background-color: $ff-bgcolor-yellow;
17+
color: variables.$ff-color-dark;
18+
background-color: variables.$ff-bgcolor-yellow;
1919
}
2020

2121
&:active:not(:disabled) {
22-
color: $ff-color-dark;
23-
background-color: $ff-bgcolor-yellow;
24-
border: 3px solid $ff-border-yellow;
22+
color: variables.$ff-color-dark;
23+
background-color: variables.$ff-bgcolor-yellow;
24+
border: 3px solid variables.$ff-border-yellow;
2525
}
2626

2727
&:disabled {
28-
color: $ff-color-gray;
29-
background-color: $ff-bgcolor-gray;
28+
color: variables.$ff-color-gray;
29+
background-color: variables.$ff-bgcolor-gray;
3030
}
3131

3232
&.active {
33-
color: $ff-color-dark;
34-
background-color: $ff-color-light;
35-
border: 1px dashed $ff-border-gray;
33+
color: variables.$ff-color-dark;
34+
background-color: variables.$ff-color-light;
35+
border: 1px dashed variables.$ff-border-gray;
3636
gap: 8px;
3737

3838
&:hover {
39-
color: $ff-color-dark;
40-
background-color: $ff-bgcolor-yellow;
39+
color: variables.$ff-color-dark;
40+
background-color: variables.$ff-bgcolor-yellow;
4141
}
4242
}
4343
}
4444

4545
ff-search > label {
46-
color: $ff-color-gray;
47-
background-color: $ff-bgcolor-white;
48-
border: 1px solid $ff-bgcolor-gray;
46+
color: variables.$ff-color-gray;
47+
background-color: variables.$ff-bgcolor-white;
48+
border: 1px solid variables.$ff-bgcolor-gray;
4949

5050
&.disabled {
51-
background-color: $ff-bgcolor-gray;
51+
background-color: variables.$ff-bgcolor-gray;
5252
}
5353

5454
input {
5555
color: inherit;
5656

5757
&::placeholder {
58-
color: hex-with-opacity($ff-color-gray, 0.75);
58+
color: variables.hex-with-opacity(variables.$ff-color-gray, 0.75);
5959
}
6060
}
6161

6262
kbd {
63-
color: $ff-color-gray;
64-
border: 1px solid $ff-border-gray;
63+
color: variables.$ff-color-gray;
64+
border: 1px solid variables.$ff-border-gray;
6565
}
6666
}
6767

6868
$ff-alert-light-opacity: 0.1;
6969
$ff-alert-light-border-opacity: 0.2;
7070

7171
ff-alert > .ff-alert {
72-
color: $ff-color-dark;
73-
border: solid $ff-border-gray;
72+
color: variables.$ff-color-dark;
73+
border: solid variables.$ff-border-gray;
7474

7575
&.info {
76-
$light-border-side: hex-with-opacity($ff-alert-info, $ff-alert-light-border-opacity);
77-
border-color: $light-border-side $light-border-side $light-border-side $ff-alert-info;
78-
background-color: hex-with-opacity($ff-alert-info, $ff-alert-light-opacity);
76+
$light-border-side: variables.hex-with-opacity(variables.$ff-alert-info, $ff-alert-light-border-opacity);
77+
border-color: $light-border-side $light-border-side $light-border-side variables.$ff-alert-info;
78+
background-color: variables.hex-with-opacity(variables.$ff-alert-info, $ff-alert-light-opacity);
7979
}
8080

8181
&.success {
82-
$light-border-side: hex-with-opacity($ff-alert-success, $ff-alert-light-border-opacity);
83-
border-color: $light-border-side $light-border-side $light-border-side $ff-alert-success;
84-
background-color: hex-with-opacity($ff-alert-success, $ff-alert-light-opacity);
82+
$light-border-side: variables.hex-with-opacity(variables.$ff-alert-success, $ff-alert-light-border-opacity);
83+
border-color: $light-border-side $light-border-side $light-border-side variables.$ff-alert-success;
84+
background-color: variables.hex-with-opacity(variables.$ff-alert-success, $ff-alert-light-opacity);
8585
}
8686

8787
&.warning {
88-
$light-border-side: hex-with-opacity($ff-alert-warning, $ff-alert-light-border-opacity);
89-
border-color: $light-border-side $light-border-side $light-border-side $ff-alert-warning;
90-
background-color: hex-with-opacity($ff-alert-warning, $ff-alert-light-opacity);
88+
$light-border-side: variables.hex-with-opacity(variables.$ff-alert-warning, $ff-alert-light-border-opacity);
89+
border-color: $light-border-side $light-border-side $light-border-side variables.$ff-alert-warning;
90+
background-color: variables.hex-with-opacity(variables.$ff-alert-warning, $ff-alert-light-opacity);
9191
}
9292

9393
&.error {
94-
$light-border-side: hex-with-opacity($ff-alert-error, $ff-alert-light-border-opacity);
95-
border-color: $light-border-side $light-border-side $light-border-side $ff-alert-error;
96-
background-color: hex-with-opacity($ff-alert-error, $ff-alert-light-opacity);
94+
$light-border-side: variables.hex-with-opacity(variables.$ff-alert-error, $ff-alert-light-border-opacity);
95+
border-color: $light-border-side $light-border-side $light-border-side variables.$ff-alert-error;
96+
background-color: variables.hex-with-opacity(variables.$ff-alert-error, $ff-alert-light-opacity);
9797
}
9898
}
9999

100100
ff-chip > span {
101-
border: 1px solid $ff-border-gray;
101+
border: 1px solid variables.$ff-border-gray;
102102
}
103103

104104
ff-datatable > .dt-wrapper {
105-
color: $ff-color-dark;
105+
color: variables.$ff-color-dark;
106106

107107
table {
108108
margin-top: 4px;
109109
border-collapse: collapse;
110110
}
111111

112112
& th, & td {
113-
border: 1px solid $ff-border-gray;
113+
border: 1px solid variables.$ff-border-gray;
114114
border-width: 1px 0;
115115
}
116116
}

‎src/app/app.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ type TableData = {
1111

1212
@Component({
1313
selector: 'app-root',
14-
standalone: true,
1514
imports: [FormsModule, LibraryModule, SvgAddIconComponent],
1615
templateUrl: './app.component.html',
1716
styleUrl: './app.component.scss',

‎src/app/svg-add-icon/svg-add-icon.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { IconBaseComponent } from 'angular-components';
33

44
@Component({
55
selector: 'app-svg-add-icon',
6-
standalone: true,
76
imports: [],
87
templateUrl: './svg-add-icon.component.html',
98
styles: `

0 commit comments

Comments
 (0)