Feat/118

.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. -->
 

.github/workflows/gh-pages.yml

@@ -19,7 +19,7 @@ jobs:
               with:
                   node-version: 20
 
-            - uses: oven-sh/setup-bun@v1
+            - uses: oven-sh/setup-bun@v2
               with:
                   bun-version: latest
 
@@ -45,7 +45,7 @@ jobs:
                   bun run build
 
             - name: Deploy demo
-              uses: peaceiris/actions-gh-pages@v3
+              uses: peaceiris/actions-gh-pages@v4
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   publish_dir: ./dist/angular-loader/browser
@@ -59,7 +59,7 @@ jobs:
         steps:
             - name: Post to a Slack channel
               id: slack
-              uses: slackapi/slack-github-action@v1.26.0
+              uses: slackapi/slack-github-action@v1.27.0
               with:
                   channel-id: 'deployments'
                   payload: |

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: Publish npm
+name: Publish bun
 
 on:
     push:
@@ -12,7 +12,7 @@ jobs:
             - uses: actions/checkout@v4
               with:
                   submodules: true
-            - uses: oven-sh/setup-bun@v1
+            - uses: oven-sh/setup-bun@v2
               with:
                   bun-version: latest
             - uses: actions/setup-node@v4

.github/workflows/quality-check.yml

@@ -22,7 +22,7 @@ jobs:
               with:
                   submodules: true
                   ref: ${{ env.REF }}
-            - uses: oven-sh/setup-bun@v1
+            - uses: oven-sh/setup-bun@v2
               with:
                   bun-version: latest
             - uses: actions/setup-node@v4

.lintstagedrc

@@ -1,7 +1,7 @@
 {
     "*.{ts,js,json}": [
         "eslint --report-unused-disable-directives --max-warnings 0 --fix",
-        "prettier --write"
+        "prettier . --write"
     ],
     "*.scss": "stylelint --fix"
-}
+}

.releaserc.yaml

@@ -1,7 +1,7 @@
 branches:
-  - develop
+    - develop
 
 plugins:
-  - '@semantic-release/commit-analyzer'
-  - '@semantic-release/github'
-  - 'semantic-release-export-data'
+    - '@semantic-release/commit-analyzer'
+    - '@semantic-release/github'
+    - 'semantic-release-export-data'

.stylelintignore

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

.stylelintrc.json

@@ -3,6 +3,9 @@
     "customSyntax": "postcss-scss",
     "plugins": ["stylelint-prettier"],
     "rules": {
+        "no-empty-source": null,
+        "scss/comment-no-empty": null,
+        "no-descending-specificity": null,
         "prettier/prettier": true,
         "selector-type-no-unknown": [
             true,

CHANGELOG.md

@@ -1,50 +1,57 @@
+# 18.0.4(2024-10-25)
+
+### Feature
+
+-   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
 
-<a name="15.0.0"></a>
+-   update to ng15
 
+<a name="15.0.0"></a>
 
 <a name="6.0.0"></a>
-# [6.0.0 base functionality] (2018-05-17)
 
+# [6.0.0 base functionality] (2018-05-17)
 
 <a name="6.1.0"></a>
+
 # [6.1.0 base functionality] (2018-05-21)
- 
+
 <p>Custom styles(background, color, size) for image and wrapper</p>
 <p>Custom animations for image rotation</p>
-
-

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

@@ -18,7 +18,9 @@
 
 You can also try our NGX MASK [check](https://www.npmjs.com/package/ngx-mask) it.
 You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste) it.
-### You can try live  [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples.
+
+### You can try live [demo](https://jsdaddy.github.io/ngx-loader-indicator/) with examples.
+
 ## Installing
 
 ```bash
@@ -39,7 +41,7 @@ bootstrapApplication(AppComponent, {
         (...)
     ],
 }).catch((err) => console.error(err));
-````
+```
 
 or configure for feature with `provideNgxLoaderIndicator` and import standalone directive `NgxLoaderIndicatorDirective`
 
@@ -68,7 +70,7 @@ or configure for feature with `provideNgxLoaderIndicator` and import standalone
     ],
 })
 export class MyFeatureComponent {}
-````
+```
 
 ## Quickstart if ngx-loader-indicator version < 15.0.0
 
@@ -93,25 +95,26 @@ import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
 ### Usage
 
 ```html
-<div [ngxLoaderIndicator]="isLoading">Content</div> 
+<div [ngxLoaderIndicator]="isLoading">Content</div>
 ```
 
 #### Examples
 
 ```html
 <form (ngSubmit)="save(form.value)" [formGroup]="form" [ngxLoaderIndicator]="isLoading">
-  <h2>Login</h2>
-  <input matInput type="email" placeholder="Email" #email formControlName="email">
-  <input matInput type="password" placeholder="Password" #name formControlName="password">
-  <button mat-button [disabled]="form.invalid">Login</button>
+    <h2>Login</h2>
+    <input matInput type="email" placeholder="Email" #email formControlName="email" />
+    <input matInput type="password" placeholder="Password" #name formControlName="password" />
+    <button mat-button [disabled]="form.invalid">Login</button>
 </form>
 ```
 
 ## Options
-You can define your custom options
 
+You can define your custom options
 
 ### custom img (string) and colors
+
 ```typescript
   {
     img: string,
@@ -123,6 +126,7 @@ You can define your custom options
 ```
 
 ### custom wrapper layout colors
+
 ```typescript
   {
     loaderStyles: {
@@ -132,6 +136,7 @@ You can define your custom options
 ```
 
 ### animations options for image rotation
+
 ```typescript
     rotate: {
       delay?: number;
@@ -146,8 +151,8 @@ You can define your custom options
     },
 ```
 
-
 ### Usage
+
 ```typescript
 import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'