feat(ref: no-ref): update ng 19

* fix(ref: no-ref): updage ng 19

* fix(ref: no-ref): updage ng 19

* fix(ref: no-ref): update ng 19

* fix(ref: no-ref): add ngxtension

Author: andriikamaldinov1

.stylelintignore

@@ -3,7 +3,6 @@
 /tmp
 /out-tsc
 /bazel-out
-/src/styles.scss
 
 # Node
 /node_modules

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
     "extends": ["stylelint-config-recommended-scss"],
     "customSyntax": "postcss-scss",
-    "plugins": ["stylelint-prettier"],
+    "plugins": ["stylelint-scss", "stylelint-prettier"],
     "rules": {
         "no-empty-source": null,
         "scss/comment-no-empty": null,
@@ -12,6 +12,12 @@
             {
                 "ignoreTypes": ["/^mat-/", "markdown", ":host", ":root"]
             }
+        ],
+        "scss/at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["tailwind"]
+            }
         ]
     }
 }

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 19.0.0(2024-11-21)
+
+### Feature
+
+-   update ng 19.x
+
 # 18.0.4(2024-10-25)
 
 ### Feature

bun.lockb

@@ -35,13 +35,10 @@ module.exports = tseslint.config(
         // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
         files: ['**/*.ts'],
         extends: [
-            // Apply the recommended core rules
             eslint.configs.recommended,
-            // Apply the recommended TypeScript rules
-            ...tseslint.configs.recommended,
-            // Optionally apply stylistic rules from typescript-eslint that improve code consistency
-            ...tseslint.configs.stylistic,
-            // Apply the recommended Angular rules
+            ...tseslint.configs.recommendedTypeChecked,
+            ...tseslint.configs.strictTypeChecked,
+            ...tseslint.configs.stylisticTypeChecked,
             ...angular.configs.tsRecommended,
         ],
         // Set the custom processor which will allow us to have our inline Component templates extracted
@@ -104,7 +101,6 @@ module.exports = tseslint.config(
             'no-unused-private-class-members': 'error',
             'no-invalid-regexp': 'error',
             curly: ['error', 'all'],
-            '@typescript-eslint/restrict-template-expressions': 'error',
             '@typescript-eslint/no-explicit-any': 'off',
             '@typescript-eslint/adjacent-overload-signatures': 'error',
             'no-console': ['warn'],
@@ -157,6 +153,14 @@ module.exports = tseslint.config(
             '@typescript-eslint/unbound-method': 'off',
             'import/no-cycle': 'off',
             'import/extensions': 'off',
+            '@typescript-eslint/no-unsafe-call': 'off',
+            '@typescript-eslint/restrict-template-expressions': [
+                'error',
+                {
+                    allowNullish: true,
+                    allowNumber: true,
+                },
+            ],
         },
     },
     {

eslint.config.js

@@ -1,6 +1,6 @@
 {
     "name": "ngx-loader-indicator",
-    "version": "18.0.4",
+    "version": "19.0.0",
     "description": "The best directive without wrapping your element to additional component",
     "license": "MIT",
     "keywords": [
@@ -36,63 +36,67 @@
         "url": "https://github.com/JsDaddy/ngx-loader-indicator.git"
     },
     "dependencies": {
-        "@angular/animations": "18.2.9",
-        "@angular/common": "18.2.9",
-        "@angular/compiler": "18.2.9",
-        "@angular/core": "18.2.9",
-        "@angular/forms": "18.2.9",
-        "@angular/platform-browser": "18.2.9",
-        "@angular/platform-browser-dynamic": "18.2.9",
-        "@angular/router": "^18.2.9",
-        "core-js": "3.38.1",
+        "@angular/animations": "19.0.0",
+        "@angular/common": "19.0.0",
+        "@angular/compiler": "19.0.0",
+        "@angular/core": "19.0.0",
+        "@angular/forms": "19.0.0",
+        "@angular/platform-browser": "19.0.0",
+        "@angular/platform-browser-dynamic": "19.0.0",
+        "@angular/router": "^19.0.0",
+        "core-js": "3.39.0",
         "highlight.js": "^11.10.0",
         "ngx-highlightjs": "^12.0.0",
+        "ngxtension": "4.1.0",
         "rxjs": "7.8.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "18.2.10",
-        "@angular-eslint/builder": "18.4.0",
-        "@angular-eslint/eslint-plugin": "18.4.0",
-        "@angular-eslint/eslint-plugin-template": "18.4.0",
-        "@angular-eslint/schematics": "18.4.0",
-        "@angular-eslint/template-parser": "18.4.0",
-        "@angular/cli": "18.2.10",
-        "@angular/compiler-cli": "18.2.9",
-        "@angular/language-service": "18.2.9",
-        "@commitlint/cli": "19.5.0",
-        "@commitlint/config-conventional": "19.5.0",
+        "@angular-devkit/build-angular": "19.0.0",
+        "@angular-eslint/builder": "18.4.1",
+        "@angular-eslint/eslint-plugin": "18.4.1",
+        "@angular-eslint/eslint-plugin-template": "18.4.1",
+        "@angular-eslint/schematics": "18.4.1",
+        "@angular-eslint/template-parser": "18.4.1",
+        "@angular/cli": "19.0.0",
+        "@angular/compiler-cli": "19.0.0",
+        "@angular/language-service": "19.0.0",
+        "@commitlint/cli": "19.6.0",
+        "@commitlint/config-conventional": "19.6.0",
         "@types/jasmine": "5.1.4",
         "@types/jasminewd2": "2.0.13",
-        "@types/node": "22.7.9",
-        "@typescript-eslint/eslint-plugin": "8.11.0",
+        "@types/node": "22.9.1",
+        "@typescript-eslint/eslint-plugin": "8.15.0",
         "@web/test-runner": "^0.19.0",
-        "angular-eslint": "^18.4.0",
-        "eslint": "9.13.0",
+        "angular-eslint": "^18.4.1",
+        "eslint": "9.15.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-json": "4.0.1",
         "eslint-plugin-prettier": "5.2.1",
         "jasmine-core": "5.4.0",
         "jasmine-spec-reporter": "7.0.0",
         "lint-staged": "15.2.10",
-        "ng-packagr": "18.2.1",
-        "npm-check-updates": "^17.1.6",
-        "postcss-scss": "4.0.9",
+        "ng-packagr": "19.0.0",
+        "npm-check-updates": "^17.1.11",
         "prettier": "3.3.3",
-        "puppeteer": "23.6.0",
-        "semantic-release": "24.1.3",
+        "puppeteer": "23.9.0",
+        "semantic-release": "24.2.0",
         "semantic-release-export-data": "1.1.0",
-        "snyk": "^1.1294.0",
+        "snyk": "^1.1294.1",
         "stylelint": "16.10.0",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "14.1.0",
         "stylelint-prettier": "5.0.2",
         "ts-node": "10.9.2",
         "type-coverage": "^2.29.7",
-        "typescript": "5.4.5",
-        "typescript-eslint": "^8.11.0",
-        "tailwindcss": "^3.4.14",
-        "bun-types": "^1.1.33"
+        "typescript": "5.6.3",
+        "typescript-eslint": "^8.15.0",
+        "tailwindcss": "^3.4.15",
+        "bun-types": "^1.1.36",
+        "postcss": "8.4.49",
+        "postcss-nesting": "13.0.1",
+        "cssnano": "7.0.6",
+        "postcss-scss": "4.0.9"
     },
     "typeCoverage": {
         "atLeast": 98,

package.json

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: {
+        'postcss-nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+        cssnano: { preset: 'default' },
+    },
+};

postcss.config.js

@@ -1,6 +1,6 @@
 {
     "name": "ngx-loader-indicator",
-    "version": "18.0.4",
+    "version": "19.0.0",
     "description": "The best directive without wrapping your element to additional component",
     "license": "MIT",
     "keywords": [

projects/ngx-loader-indicator-lib/package.json

@@ -1,5 +1,5 @@
 describe('First test group', () => {
     it('First test', () => {
-        expect(1).toEqual(1);
+        void expect(1).toEqual(1);
     });
 });

projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.spec.ts

@@ -21,22 +21,22 @@ export class NgxLoaderIndicatorDirective {
     }
     private processValue(value: boolean) {
         if (!value) {
-            if (this.loaderEl) {
+            if (this.loaderEl instanceof HTMLDivElement) {
                 this._setStyles(this.loaderEl, { display: 'none' });
             }
             return;
         }
         const { rotate, hostStyles, loaderStyles, imgStyles, img } = this._config;
 
-        this.loaderEl = this._renderer.createElement('div');
-        const imgEl = this._renderer.createElement('img');
+        this.loaderEl = this._renderer.createElement('div') as HTMLDivElement;
+        const imgEl = this._renderer.createElement('img') as HTMLImageElement;
 
         imgEl.animate([{ transform: 'rotate(360deg)' }, { transform: 'rotate(0deg)' }], rotate);
 
         this._renderer.appendChild(this._el.nativeElement, this.loaderEl);
         this._renderer.appendChild(this.loaderEl, imgEl);
 
-        this._setStyles(this._el.nativeElement, hostStyles);
+        this._setStyles(this._el.nativeElement as HTMLElement, hostStyles);
         this._setStyles(this.loaderEl, loaderStyles);
         this._setStyles(imgEl, imgStyles);
 

projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.directive.ts

@@ -12,11 +12,9 @@ export function _configFactory(
     initConfig: optionsConfig,
     configValue: optionsConfig
 ): optionsConfig {
-    const loaderStyles: Config['loaderStyles'] | null = configValue
-        ? configValue.loaderStyles
-        : null;
-    const imgStyles: Config['imgStyles'] | null = configValue ? configValue.imgStyles : null;
-    const rotate: Config['rotate'] | null = configValue ? configValue.rotate : null;
+    const loaderStyles: Config['loaderStyles'] | null = configValue.loaderStyles ?? null;
+    const imgStyles: Config['imgStyles'] | null = configValue.imgStyles ?? null;
+    const rotate: Config['rotate'] | null = configValue.rotate ?? null;
 
     return {
         ...initConfig,

projects/ngx-loader-indicator-lib/src/lib/ngx-loader-indicator.providers.ts

@@ -1,5 +1,5 @@
 describe('App component', () => {
     it('First test', () => {
-        expect(1).toEqual(1);
+        void expect(1).toEqual(1);
     });
 });

src/app/app.component.spec.ts

@@ -4,7 +4,6 @@ import { HighlightModule } from 'ngx-highlightjs';
 import { NgxLoaderIndicatorDirective } from 'ngx-loader-indicator';
 import { CardItem } from './cards.type';
 import { ScrollService } from '@open-source/scroll/scroll.service';
-import { ColorPipe } from '@open-source/color/color.pipe';
 import { AssetPipe } from '@libraries/asset/asset.pipe';
 import { CustomLoaderComponent } from '../custom-loader/custom-loader.component';
 import { FormComponent } from '../shared/form/form.component';
@@ -19,7 +18,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
         NgOptimizedImage,
         HighlightModule,
         NgxLoaderIndicatorDirective,
-        ColorPipe,
         AssetPipe,
         CustomLoaderComponent,
         FormComponent,

src/app/cards/cards.component.ts

@@ -25,4 +25,5 @@ import { NgxLoaderIndicatorDirective, provideNgxLoaderIndicator } from 'ngx-load
         }),
     ],
 })
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export class CustomLoaderComponent {}

src/app/custom-loader/custom-loader.component.ts

@@ -30,5 +30,7 @@ bootstrapApplication(AppComponent, {
             },
         },
     ],
+}).catch((err: unknown) => {
     // eslint-disable-next-line no-console
-}).catch((err) => console.error(err));
+    console.error(err);
+});

src/libraries

@@ -1,3 +1,5 @@
+@use './libraries/styles/scroll-bar';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/main.ts

@@ -27,15 +27,17 @@
         "resolveJsonModule": true,
         "allowSyntheticDefaultImports": true,
         "paths": {
-            "ngx-loader-indicator": ["./projects/ngx-loader-indicator-lib/src/public-api"],
+            "@libraries/*": ["./src/libraries/*"],
             "@open-source/*": ["./src/libraries/open-source/*"],
-            "@libraries/*": ["./src/libraries/*"]
+            "ngx-loader-indicator": ["./projects/ngx-loader-indicator-lib/src/public-api"]
         },
         "skipLibCheck": true,
-        "noImplicitAny": true
+        "noImplicitAny": true,
+        "isolatedModules": true
     },
     "angularCompilerOptions": {
         "enableI18nLegacyMessageIdFormat": false,
+        "strictStandalone": true,
         "strictInjectionParameters": true,
         "strictInputAccessModifiers": true,
         "strictTemplates": true,
@@ -44,7 +46,8 @@
         "extendedDiagnostics": {
             "checks": {
                 "invalidBananaInBox": "error",
-                "nullishCoalescingNotNullable": "warning"
+                "nullishCoalescingNotNullable": "warning",
+                "unusedStandaloneImports": "suppress"
             },
             "defaultCategory": "suppress"
         }