fix(ref: #129): enhancement

andriikamaldinov1 · andriikamaldinov1 · commit bc29dab8a364 · 2025-04-30T11:16:52.000+03:00
diff --git a/.postcssrc.json b/.postcssrc.json
@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -16,7 +16,7 @@
         "scss/at-rule-no-unknown": [
             true,
             {
-                "ignoreAtRules": ["tailwind"]
+                "ignoreAtRules": ["tailwind", "config"]
             }
         ]
     }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 19.0.1(2025-04-30)
+
+### Feature
+
+-   update dependencies
+
+
 # 19.0.0(2024-11-21)
 
 ### Feature
diff --git a/README.md b/README.md
@@ -23,10 +23,18 @@ You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-cop
 
 ## Installing
 
+## npm
 ```bash
 $ npm install --save ngx-loader-indicator
 ```
 
+## bun
+
+```bash
+$ bun install --save ngx-loader-indicator
+```
+
+
 ## Quickstart if ngx-loader-indicator version >= 15.0.0
 
 Pay attention this version works for angular >= 14.0.0
diff --git a/bun.lock b/bun.lock
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-loader-indicator",
-    "version": "19.0.0",
+    "version": "19.0.1",
     "description": "The best directive without wrapping your element to additional component",
     "license": "MIT",
     "keywords": [
@@ -36,64 +36,65 @@
         "url": "https://github.com/JsDaddy/ngx-loader-indicator.git"
     },
     "dependencies": {
-        "@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"
+        "@angular/animations": "19.2.8",
+        "@angular/common": "19.2.8",
+        "@angular/compiler": "19.2.8",
+        "@angular/core": "19.2.8",
+        "@angular/forms": "19.2.8",
+        "@angular/platform-browser": "19.2.8",
+        "@angular/platform-browser-dynamic": "19.2.8",
+        "@angular/router": "^19.2.8",
+        "@tailwindcss/postcss": "^4.1.4",
+        "core-js": "3.42.0",
+        "highlight.js": "^11.11.1",
+        "ngx-highlightjs": "^14.0.0",
+        "ngxtension": "5.0.0",
+        "rxjs": "7.8.2"
     },
     "devDependencies": {
-        "@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",
+        "@angular-devkit/build-angular": "19.2.9",
+        "@angular-eslint/builder": "19.3.0",
+        "@angular-eslint/eslint-plugin": "19.3.0",
+        "@angular-eslint/eslint-plugin-template": "19.3.0",
+        "@angular-eslint/schematics": "19.3.0",
+        "@angular-eslint/template-parser": "19.3.0",
+        "@angular/cli": "19.2.9",
+        "@angular/compiler-cli": "19.2.8",
+        "@angular/language-service": "19.2.8",
+        "@commitlint/cli": "19.8.0",
+        "@commitlint/config-conventional": "19.8.0",
+        "@types/jasmine": "5.1.7",
         "@types/jasminewd2": "2.0.13",
-        "@types/node": "22.9.1",
-        "@typescript-eslint/eslint-plugin": "8.15.0",
-        "@web/test-runner": "^0.19.0",
-        "angular-eslint": "^18.4.1",
-        "eslint": "9.15.0",
-        "eslint-config-prettier": "9.1.0",
+        "@types/node": "22.15.3",
+        "@typescript-eslint/eslint-plugin": "8.31.1",
+        "@web/test-runner": "^0.20.1",
+        "angular-eslint": "^19.3.0",
+        "eslint": "9.25.1",
+        "eslint-config-prettier": "10.1.2",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-json": "4.0.1",
-        "eslint-plugin-prettier": "5.2.1",
-        "jasmine-core": "5.4.0",
+        "eslint-plugin-prettier": "5.2.6",
+        "jasmine-core": "5.7.0",
         "jasmine-spec-reporter": "7.0.0",
-        "lint-staged": "15.2.10",
-        "ng-packagr": "19.0.0",
-        "npm-check-updates": "^17.1.11",
-        "prettier": "3.3.3",
-        "puppeteer": "23.9.0",
-        "semantic-release": "24.2.0",
+        "lint-staged": "15.5.1",
+        "ng-packagr": "19.2.2",
+        "npm-check-updates": "^18.0.1",
+        "prettier": "3.5.3",
+        "puppeteer": "24.7.2",
+        "semantic-release": "24.2.3",
         "semantic-release-export-data": "1.1.0",
-        "snyk": "^1.1294.1",
-        "stylelint": "16.10.0",
+        "snyk": "^1.1296.2",
+        "stylelint": "16.19.1",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "14.1.0",
-        "stylelint-prettier": "5.0.2",
+        "stylelint-prettier": "5.0.3",
         "ts-node": "10.9.2",
         "type-coverage": "^2.29.7",
-        "typescript": "5.6.3",
-        "typescript-eslint": "^8.15.0",
-        "tailwindcss": "^3.4.15",
-        "bun-types": "^1.1.36",
-        "postcss": "8.4.49",
+        "typescript": "5.8.3",
+        "typescript-eslint": "^8.31.1",
+        "tailwindcss": "^4.1.4",
+        "bun-types": "^1.2.11",
+        "postcss": "^8.5.3",
         "postcss-nesting": "13.0.1",
         "cssnano": "7.0.6",
         "postcss-scss": "4.0.9"
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/projects/ngx-loader-indicator-lib/package.json b/projects/ngx-loader-indicator-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-loader-indicator",
-    "version": "19.0.0",
+    "version": "19.0.1",
     "description": "The best directive without wrapping your element to additional component",
     "license": "MIT",
     "keywords": [
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,3 +0,0 @@
-:host {
-    @apply block h-full;
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { HeaderComponent } from '@open-source/header/header.component';
 import { AccordionComponent } from '@open-source/accordion/accordion.component';
 import { SubHeaderComponent } from '@open-source//sub-header/sub-header.component';
@@ -35,4 +35,7 @@ export class AppComponent {
     public readonly subtitle =
         'Awesome loader for angular applications. No wrappers only you elements';
     public readonly chips = ['Website', 'Angular', 'Typescript', 'Carousel', 'Spinner'];
+
+    @HostBinding('class')
+    public readonly hostClassname = 'block h-full';
 }
diff --git a/src/app/cards/cards.component.scss b/src/app/cards/cards.component.scss
@@ -1,3 +0,0 @@
-:host {
-    @apply flex flex-col gap-4 p-4 bg-full-white box-border border-t border-t-black/10 py-5 pl-[22px] pr-4;
-}
diff --git a/src/app/cards/cards.component.ts b/src/app/cards/cards.component.ts
@@ -1,4 +1,12 @@
-import { Component, effect, ElementRef, inject, input, viewChildren } from '@angular/core';
+import {
+    Component,
+    effect,
+    ElementRef,
+    HostBinding,
+    inject,
+    input,
+    viewChildren,
+} from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
 import { HighlightModule } from 'ngx-highlightjs';
 import { CardItem } from './cards.type';
@@ -29,6 +37,10 @@ export class CardsComponent {
     private readonly scrollService = inject(ScrollService);
     public readonly activeCardId = toSignal(this.scrollService.activeCard$);
 
+    @HostBinding('class')
+    public readonly hostClassname =
+        'flex flex-col gap-4 p-4 bg-full-white box-border border-t border-t-black/10 py-5 pl-[22px] pr-4';
+
     public constructor() {
         effect(() => {
             this.scrollService.onScroll(this.cards());
diff --git a/src/libraries b/src/libraries
@@ -1 +1 @@
-Subproject commit 158eddb9ea79ca05967268021029ecdf096c23bb
+Subproject commit 1450778edfbf6fa0245a04899932405db2a81c04
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,5 +1,3 @@
 @use './libraries/styles/scroll-bar';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@use 'tailwindcss';
+@config '../tailwind.config';

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "plugins": {
 +        "@tailwindcss/postcss": {}
 +    }
 +}
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`"scss/at-rule-no-unknown": [`
`17`	`17`	`true,`
`18`	`18`	`{`
`19`		`- "ignoreAtRules": ["tailwind"]`
	`19`	`+ "ignoreAtRules": ["tailwind", "config"]`
`20`	`20`	`}`
`21`	`21`	`]`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-loader-indicator",`
`3`		`- "version": "19.0.0",`
	`3`	`+ "version": "19.0.1",`
`4`	`4`	`"description": "The best directive without wrapping your element to additional component",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +0,0 @@`
`1`		`-:host {`
`2`		`- @apply block h-full;`
`3`		`-}`