feat(ref: #129): enhancement

feat(ref: #129): enhancement

Author: andriikamaldinov1

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,24 +2,24 @@
 
 Please check if your PR fulfills the following requirements:
 
--   [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-loader-indicator/blob/develop/CONTRIBUTING.md#commit
--   [ ] Tests for the changes have been added (for bug fixes / features)
--   [ ] Docs have been added / updated (for bug fixes / features)
+- [ ] The commit message follows our guidelines: https://github.com/JsDaddy/ngx-loader-indicator/blob/develop/CONTRIBUTING.md#commit
+- [ ] Tests for the changes have been added (for bug fixes / features)
+- [ ] Docs have been added / updated (for bug fixes / features)
 
 ## PR Type
 
 What kind of change does this PR introduce?
 
 <!-- Please check the one that applies to this PR using "x". -->
 
--   [ ] Bugfix
--   [ ] Feature
--   [ ] Code style update (formatting, local variables)
--   [ ] Refactoring (no functional changes, no api changes)
--   [ ] Build related changes
--   [ ] CI related changes
--   [ ] Documentation content changes
--   [ ] Other... Please describe:
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Code style update (formatting, local variables)
+- [ ] Refactoring (no functional changes, no api changes)
+- [ ] Build related changes
+- [ ] CI related changes
+- [ ] Documentation content changes
+- [ ] Other... Please describe:
 
 ## What is the current behavior?
 
@@ -31,8 +31,8 @@ Issue Number: N/A
 
 ## Does this PR introduce a breaking change?
 
--   [ ] Yes
--   [ ] No
+- [ ] Yes
+- [ ] No
 
 <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
 

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

.stylelintrc.json

@@ -16,7 +16,7 @@
         "scss/at-rule-no-unknown": [
             true,
             {
-                "ignoreAtRules": ["tailwind"]
+                "ignoreAtRules": ["tailwind", "config"]
             }
         ]
     }

CHANGELOG.md

@@ -1,53 +1,59 @@
+# 19.0.1(2025-04-30)
+
+### Feature
+
+- update dependencies
+
 # 19.0.0(2024-11-21)
 
 ### Feature
 
--   update ng 19.x
+- update ng 19.x
 
 # 18.0.4(2024-10-25)
 
 ### Feature
 
--   add tailwind
--   change interface to type, remove prefix "I"
--   update dependencies
--   add ESLint strict rules
+- add tailwind
+- change interface to type, remove prefix "I"
+- update dependencies
+- add ESLint strict rules
 
 # 17.3.2(2024-03-29)
 
 ### Feature
 
--   change decorators to signals
+- change decorators to signals
 
 <a name="17.0.0"></a>
 
 # 17.0.0(2023-11-28)
 
 ### Feature
 
--   update ng 17.x
+- update ng 17.x
 
 <a name="17.0.0"></a>
 
 # 16.0.1(2023-10-03)
 
 ### Feature
 
--   update dependencies
+- update dependencies
 
 # 16.0.0(2023-07-07)
 
 ### Feature
 
--   update ng 16.x
+- update ng 16.x
 
 <a name="16.0.0"></a>
 
 # 15.0.0(2022-26-12)
 
 ### Feature
 
--   update to ng15
+- update to ng15
 
 <a name="15.0.0"></a>
 

CONTRIBUTING.md

@@ -8,16 +8,16 @@ Please format code and markup in your issue using [github markdown](https://help
 
 ## Contributing to Source Code (Pull Requests)
 
--   If your PR changes any behavior or fixes an issue, it should have an associated test.
--   New features should be general and as simple as possible.
--   Breaking changes should be avoided if possible.
--   All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me).
+- If your PR changes any behavior or fixes an issue, it should have an associated test.
+- New features should be general and as simple as possible.
+- Breaking changes should be avoided if possible.
+- All pull requests require review. No PR will be merged without a comment from a team member stating LGTM (Looks good to me).
 
 ## Protractor specific rules
 
--   JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml).
--   Document public methods with jsdoc.
--   Be consistent with the code around you!
+- JavaScript style should generally follow the [Google JS style guide](https://google.github.io/styleguide/javascriptguide.xml).
+- Document public methods with jsdoc.
+- Be consistent with the code around you!
 
 ## Commit Messages
 

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

bun.lock

@@ -78,6 +78,7 @@ module.exports = tseslint.config(
             '@typescript-eslint/no-non-null-asserted-nullish-coalescing': 'error',
             '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
             '@typescript-eslint/no-non-null-assertion': 'error',
+            '@typescript-eslint/no-redundant-type-constituents': 'off',
             '@typescript-eslint/no-this-alias': 'error',
             '@typescript-eslint/no-unnecessary-type-constraint': 'error',
             '@typescript-eslint/no-unsafe-declaration-merging': 'error',

bun.lockb

@@ -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,67 +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",
-        "postcss-nesting": "13.0.1",
-        "cssnano": "7.0.6",
-        "postcss-scss": "4.0.9"
+        "typescript": "5.8.3",
+        "typescript-eslint": "^8.31.1",
+        "tailwindcss": "^4.1.4",
+        "bun-types": "^1.2.11",
+        "postcss": "^8.5.3"
     },
     "typeCoverage": {
         "atLeast": 98,

eslint.config.js

@@ -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": [

package.json

@@ -1,3 +0,0 @@
-:host {
-    @apply block h-full;
-}

postcss.config.js

@@ -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';
 }

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

@@ -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;
-}

src/app/app.component.scss

@@ -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());

src/app/app.component.ts

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

src/app/cards/cards.component.scss

@@ -1,6 +1,4 @@
-import { type Config } from 'tailwindcss';
-
-const tailwindConfig: Config = {
+const tailwindConfig = {
     content: ['./src/**/*.{html,scss,ts}'],
     theme: {
         extend: {