Skip to content

Commit dff5043

Browse files
t-hot-ho
committed
feat: upgrade ngx-ui-loader library to Angular 19
 - Upgrade all Angular dependencies from 18.x to 19.x - Update package.json versions and peer dependencies - Add ESLint disable comments for standalone component warnings - Maintain NgModule compatibility with standalone: false - Keep NgxUiLoaderRouterConfig as interface for API compatibility - Update README with Angular 19 installation instructions - Maintain full backward compatibility for existing projects
1 parent 9833f3d commit dff5043

File tree

11 files changed

+3252
-2638
lines changed

11 files changed

+3252
-2638
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ $ yarn add ngx-ui-loader
4343

4444
| Angular | Installation | Documentation |
4545
| ------------- | ----------------------------------- | --------------------------------------------------------------------- |
46-
| Angular 18 | `npm i --save ngx-ui-loader` | [v18.x.x](https://tdev.app/ngx-ui-loader) |
46+
| Angular 19 | `npm i --save ngx-ui-loader` | [v19.x.x](https://tdev.app/ngx-ui-loader) |
47+
| Angular 18 | `npm i --save ngx-ui-loader@18.0.0` | [v18.x.x](https://tdev.app/ngx-ui-loader) |
4748
| Angular 17 | `npm i --save ngx-ui-loader@17.0.0` | [v17.x.x](https://tdev.app/ngx-ui-loader) |
4849
| Angular 16 | `npm i --save ngx-ui-loader@16.0.1` | [v16.x.x](https://tdev.app/ngx-ui-loader) |
4950
| Angular 15 | `npm i --save ngx-ui-loader@15.0.0` | [v15.x.x](https://tdev.app/ngx-ui-loader) |

‎package-lock.json‎

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

‎package.json‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "ngx-ui-loader",
3-
"version": "18.0.0",
3+
"version": "19.0.0",
4+
"type": "module",
45
"scripts": {
56
"ng": "ng",
67
"prettier": "prettier --write \"**/*.{scss,ts,component.html}\"",
@@ -15,36 +16,35 @@
1516
},
1617
"private": true,
1718
"dependencies": {
18-
"@angular/animations": "^18.2.12",
19-
"@angular/cdk": "^18.2.13",
20-
"@angular/common": "^18.2.12",
21-
"@angular/compiler": "^18.2.12",
22-
"@angular/core": "^18.2.12",
23-
"@angular/flex-layout": "^15.0.0-beta.42",
24-
"@angular/forms": "^18.2.12",
25-
"@angular/material": "^18.2.13",
26-
"@angular/platform-browser": "^18.2.12",
27-
"@angular/platform-browser-dynamic": "^18.2.12",
28-
"@angular/router": "^18.2.12",
29-
"ngx-color-picker": "^18.0.0",
19+
"@angular/animations": "^19.1.2",
20+
"@angular/cdk": "^19.1.1",
21+
"@angular/common": "^19.1.2",
22+
"@angular/compiler": "^19.1.2",
23+
"@angular/core": "^19.1.2",
24+
"@angular/forms": "^19.1.2",
25+
"@angular/material": "^19.1.1",
26+
"@angular/platform-browser": "^19.1.2",
27+
"@angular/platform-browser-dynamic": "^19.1.2",
28+
"@angular/router": "^19.1.2",
29+
"ngx-color-picker": "^19.0.0",
3030
"rxjs": "~7.8.0",
3131
"tslib": "^2.6.0",
32-
"zone.js": "~0.14.10"
32+
"zone.js": "~0.15.0"
3333
},
3434
"devDependencies": {
35-
"@angular-devkit/build-angular": "^18.2.12",
36-
"@angular-eslint/builder": "18.3.0",
37-
"@angular-eslint/eslint-plugin": "18.3.0",
38-
"@angular-eslint/eslint-plugin-template": "18.3.0",
39-
"@angular-eslint/schematics": "18.3.0",
40-
"@angular-eslint/template-parser": "18.3.0",
41-
"@angular/cli": "^18.2.12",
42-
"@angular/compiler-cli": "^18.2.12",
35+
"@angular-devkit/build-angular": "^19.1.2",
36+
"@angular-eslint/builder": "19.0.1",
37+
"@angular-eslint/eslint-plugin": "19.0.1",
38+
"@angular-eslint/eslint-plugin-template": "19.0.1",
39+
"@angular-eslint/schematics": "19.0.1",
40+
"@angular-eslint/template-parser": "19.0.1",
41+
"@angular/cli": "^19.1.2",
42+
"@angular/compiler-cli": "^19.1.2",
4343
"@types/jasmine": "~5.1.0",
4444
"@types/node": "^18.17.0",
45-
"@typescript-eslint/eslint-plugin": "^7.0.0",
46-
"@typescript-eslint/parser": "^7.0.0",
47-
"eslint": "^8.44.0",
45+
"@typescript-eslint/eslint-plugin": "^8.0.0",
46+
"@typescript-eslint/parser": "^8.0.0",
47+
"eslint": "^9.0.0",
4848
"husky": "^8.0.3",
4949
"jasmine-core": "~5.1.0",
5050
"karma": "~6.4.2",
@@ -53,9 +53,9 @@
5353
"karma-jasmine": "~5.1.0",
5454
"karma-jasmine-html-reporter": "~2.1.0",
5555
"lint-staged": "^13.2.3",
56-
"ng-packagr": "^18.2.0",
56+
"ng-packagr": "^19.1.0",
5757
"prettier": "^3.0.0",
58-
"typescript": "~5.4.0"
58+
"typescript": "~5.6.0"
5959
},
6060
"lint-staged": {
6161
"*.ts": "eslint --cache --fix",

‎projects/ngx-ui-loader/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ngx-ui-loader",
33
"description": "An all-in-one and fully customizable loader/spinner for Angular applications. It supports foreground, background spinner/loader, indicative progress bar and multiple loaders.",
4-
"version": "18.0.0",
4+
"version": "19.0.0",
55
"scripts": {
66
"build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
77
"copy:collections": "cp schematics/*collection.json ../../dist/ngx-ui-loader/schematics/",
@@ -23,8 +23,8 @@
2323
"license": "MIT",
2424
"private": false,
2525
"peerDependencies": {
26-
"@angular/common": ">=18.0.0",
27-
"@angular/core": ">=18.0.0"
26+
"@angular/common": ">=19.0.0",
27+
"@angular/core": ">=19.0.0"
2828
},
2929
"dependencies": {
3030
"tslib": "^2.6.0"

‎projects/ngx-ui-loader/schematics/migration-collection.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
"version": "18.0.0",
4040
"factory": "./update/index#update1800",
4141
"description": "Update ngx-ui-loader to version 18.0.0"
42+
},
43+
"migration-1900": {
44+
"version": "19.0.0",
45+
"factory": "./update/index#update1900",
46+
"description": "Update ngx-ui-loader to version 19.0.0"
4247
}
4348
}
4449
}

‎projects/ngx-ui-loader/schematics/update/index.ts‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
1-
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
1+
import { Rule, Tree } from '@angular-devkit/schematics';
22

3-
export function update1000(_options: unknown): Rule {
4-
return (tree: Tree, _context: SchematicContext) => tree;
3+
export function update1000(): Rule {
4+
return (tree: Tree) => tree;
55
}
66

7-
export function update1100(_options: unknown): Rule {
8-
return (tree: Tree, _context: SchematicContext) => tree;
7+
export function update1100(): Rule {
8+
return (tree: Tree) => tree;
99
}
1010

11-
export function update1300(_options: unknown): Rule {
12-
return (tree: Tree, _context: SchematicContext) => tree;
11+
export function update1300(): Rule {
12+
return (tree: Tree) => tree;
1313
}
1414

15-
export function update1400(_options: unknown): Rule {
16-
return (tree: Tree, _context: SchematicContext) => tree;
15+
export function update1400(): Rule {
16+
return (tree: Tree) => tree;
1717
}
1818

19-
export function update1500(_options: unknown): Rule {
20-
return (tree: Tree, _context: SchematicContext) => tree;
19+
export function update1500(): Rule {
20+
return (tree: Tree) => tree;
2121
}
2222

23-
export function update1600(_options: unknown): Rule {
24-
return (tree: Tree, _context: SchematicContext) => tree;
23+
export function update1600(): Rule {
24+
return (tree: Tree) => tree;
2525
}
2626

27-
export function update1700(_options: unknown): Rule {
28-
return (tree: Tree, _context: SchematicContext) => tree;
27+
export function update1700(): Rule {
28+
return (tree: Tree) => tree;
2929
}
3030

31-
export function update1800(_options: unknown): Rule {
32-
return (tree: Tree, _context: SchematicContext) => tree;
31+
export function update1800(): Rule {
32+
return (tree: Tree) => tree;
33+
}
34+
35+
export function update1900(): Rule {
36+
return (tree: Tree) => tree;
3337
}

‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable @angular-eslint/directive-selector */
2+
/* eslint-disable @angular-eslint/prefer-standalone */
23
import {
34
Directive,
45
ElementRef,
@@ -18,7 +19,10 @@ import {
1819
FAST_OVERLAY_DISAPPEAR_TIME,
1920
} from '../utils/constants';
2021

21-
@Directive({ selector: '[ngxUiLoaderBlurred]' })
22+
@Directive({
23+
selector: '[ngxUiLoaderBlurred]',
24+
standalone: false,
25+
})
2226
export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy {
2327
@Input() blur: number;
2428
@Input() loaderId: string;
@@ -29,7 +33,7 @@ export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy {
2933
constructor(
3034
private elementRef: ElementRef,
3135
private renderer: Renderer2,
32-
private loader: NgxUiLoaderService
36+
private loader: NgxUiLoaderService,
3337
) {
3438
this.blur = this.loader.getDefaultConfig().blur;
3539
this.loaderId = this.loader.getDefaultConfig().masterLoaderId;
@@ -42,20 +46,20 @@ export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy {
4246
ngOnInit() {
4347
this.showForegroundWatcher = this.loader.showForeground$
4448
.pipe(
45-
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)
49+
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId),
4650
)
4751
.subscribe((data) => {
4852
if (data.isShow) {
4953
const filterValue = `blur(${this.blur}px)`;
5054
this.renderer.setStyle(
5155
this.elementRef.nativeElement,
5256
'-webkit-filter',
53-
filterValue
57+
filterValue,
5458
);
5559
this.renderer.setStyle(
5660
this.elementRef.nativeElement,
5761
'filter',
58-
filterValue
62+
filterValue,
5963
);
6064
} else {
6165
setTimeout(
@@ -64,18 +68,18 @@ export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy {
6468
this.renderer.setStyle(
6569
this.elementRef.nativeElement,
6670
'-webkit-filter',
67-
'none'
71+
'none',
6872
);
6973
this.renderer.setStyle(
7074
this.elementRef.nativeElement,
7175
'filter',
72-
'none'
76+
'none',
7377
);
7478
}
7579
},
7680
this.fastFadeOut
7781
? FAST_OVERLAY_DISAPPEAR_TIME
78-
: OVERLAY_DISAPPEAR_TIME
82+
: OVERLAY_DISAPPEAR_TIME,
7983
);
8084
}
8185
});

‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable @angular-eslint/component-selector */
2+
/* eslint-disable @angular-eslint/prefer-standalone */
23
import {
34
Component,
45
Input,
@@ -31,17 +32,20 @@ import { ShowEvent } from '../utils/interfaces';
3132
templateUrl: './ngx-ui-loader.component.html',
3233
styleUrls: ['./ngx-ui-loader.component.scss'],
3334
changeDetection: ChangeDetectionStrategy.OnPush,
35+
standalone: false,
3436
})
3537
export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
3638
@Input() bgsColor: string;
3739
@Input() bgsOpacity: number;
3840
@Input() bgsPosition: PositionType;
3941
@Input() bgsSize: number;
42+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4043
@Input() bgsTemplate: TemplateRef<any>;
4144
@Input() bgsType: SpinnerType;
4245
@Input() fgsColor: string;
4346
@Input() fgsPosition: PositionType;
4447
@Input() fgsSize: number;
48+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4549
@Input() fgsTemplate: TemplateRef<any>;
4650
@Input() fgsType: SpinnerType;
4751
@Input() gap: number;
@@ -88,7 +92,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
8892
constructor(
8993
private domSanitizer: DomSanitizer,
9094
private changeDetectorRef: ChangeDetectorRef,
91-
private ngxService: NgxUiLoaderService
95+
private ngxService: NgxUiLoaderService,
9296
) {
9397
this.initialized = false;
9498
this.defaultConfig = this.ngxService.getDefaultConfig();
@@ -128,12 +132,12 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
128132
this.determinePositions();
129133

130134
this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
131-
this.logoUrl
135+
this.logoUrl,
132136
);
133137

134138
this.showForegroundWatcher = this.ngxService.showForeground$
135139
.pipe(
136-
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)
140+
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId),
137141
)
138142
.subscribe((data) => {
139143
this.showForeground = data.isShow;
@@ -142,7 +146,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
142146

143147
this.showBackgroundWatcher = this.ngxService.showBackground$
144148
.pipe(
145-
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)
149+
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId),
146150
)
147151
.subscribe((data) => {
148152
this.showBackground = data.isShow;
@@ -151,7 +155,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
151155

152156
this.foregroundClosingWatcher = this.ngxService.foregroundClosing$
153157
.pipe(
154-
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)
158+
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId),
155159
)
156160
.subscribe((data) => {
157161
this.foregroundClosing = data.isShow;
@@ -160,7 +164,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
160164

161165
this.backgroundClosingWatcher = this.ngxService.backgroundClosing$
162166
.pipe(
163-
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)
167+
filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId),
164168
)
165169
.subscribe((data) => {
166170
this.backgroundClosing = data.isShow;
@@ -189,7 +193,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
189193

190194
if (logoUrlChange) {
191195
this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
192-
this.logoUrl
196+
this.logoUrl,
193197
);
194198
}
195199
}
@@ -257,33 +261,33 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
257261
this.logoTop = this.domSanitizer.bypassSecurityTrustStyle(
258262
`calc(50% - ${this.fgsSize / 2}px - ${textSize / 2}px - ${
259263
this.gap
260-
}px)`
264+
}px)`,
261265
);
262266
this.spinnerTop = this.domSanitizer.bypassSecurityTrustStyle(
263-
`calc(50% + ${this.logoSize / 2}px - ${textSize / 2}px)`
267+
`calc(50% + ${this.logoSize / 2}px - ${textSize / 2}px)`,
264268
);
265269
this.textTop = this.domSanitizer.bypassSecurityTrustStyle(
266270
`calc(50% + ${this.logoSize / 2}px + ${this.gap}px + ${
267271
this.fgsSize / 2
268-
}px)`
272+
}px)`,
269273
);
270274
} else {
271275
// logo and spinner
272276
this.logoTop = this.domSanitizer.bypassSecurityTrustStyle(
273-
`calc(50% - ${this.fgsSize / 2}px - ${this.gap / 2}px)`
277+
`calc(50% - ${this.fgsSize / 2}px - ${this.gap / 2}px)`,
274278
);
275279
this.spinnerTop = this.domSanitizer.bypassSecurityTrustStyle(
276-
`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`
280+
`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`,
277281
);
278282
}
279283
} else {
280284
if (this.text && this.textPosition === POSITION.centerCenter) {
281285
// spinner and text
282286
this.spinnerTop = this.domSanitizer.bypassSecurityTrustStyle(
283-
`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`
287+
`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`,
284288
);
285289
this.textTop = this.domSanitizer.bypassSecurityTrustStyle(
286-
`calc(50% + ${this.fgsSize / 2}px + ${this.gap / 2}px)`
290+
`calc(50% + ${this.fgsSize / 2}px + ${this.gap / 2}px)`,
287291
);
288292
}
289293
}
@@ -296,10 +300,10 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
296300
) {
297301
// logo and text
298302
this.logoTop = this.domSanitizer.bypassSecurityTrustStyle(
299-
`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`
303+
`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`,
300304
);
301305
this.textTop = this.domSanitizer.bypassSecurityTrustStyle(
302-
`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`
306+
`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`,
303307
);
304308
}
305309
}

0 commit comments

Comments
 (0)