Feat/129

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

.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-29)
+
+### 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="16.0.0"></a>
 
 # 17.0.0(2023-11-28)
 
 ### Feature
 
--   update ng 17.x
+- update ng 17.x
 
 <a name="16.0.0"></a>
 
 # 16.0.1(2023-07-07)
 
 ### Feature
 
--   add success cb
--   update dependencies
+- add success cb
+- 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-25-12)
 
 ### Feature
 
--   ng 15
+- ng 15
 
 <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 LOADER INDICATOR [check](https://www.npmjs.com/package/
 
 ## Installing
 
+## npm
+
 ```bash
 $ npm install --save ngx-copypaste
 ```
 
+## bun
+
+```bash
+$ bun install --save ngx-copypaste
+```
+
 ## Quickstart if ngx-copypaste version >= 15.0.0
 
 Pay attention this version works for angular >= 14.0.0

eslint.config.js

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

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-copypaste",
     "description": "Awesome ngx copypaste directive",
-    "version": "18.0.2",
+    "version": "19.0.1",
     "license": "MIT",
     "keywords": [
         "ng2-copypaste",
@@ -49,62 +49,62 @@
         "url": "https://github.com/JsDaddy/ngx-copypaste.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",
-        "highlight.js": "^11.10.0",
-        "ngx-highlightjs": "^12.0.0",
-        "ngxtension": "^4.1.0",
-        "rxjs": "7.8.1",
-        "snyk": "^1.1294.1"
+        "@angular/animations": "19.2.9",
+        "@angular/common": "19.2.9",
+        "@angular/compiler": "19.2.9",
+        "@angular/core": "19.2.9",
+        "@angular/forms": "19.2.9",
+        "@angular/platform-browser": "19.2.9",
+        "@angular/platform-browser-dynamic": "19.2.9",
+        "@angular/router": "^19.2.9",
+        "highlight.js": "^11.11.1",
+        "ngx-highlightjs": "^14.0.0",
+        "ngxtension": "^5.0.0",
+        "rxjs": "7.8.2",
+        "snyk": "^1.1296.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",
-        "@types/node": "22.9.1",
-        "@typescript-eslint/eslint-plugin": "^8.15.0",
-        "@web/test-runner": "^0.19.0",
-        "angular-eslint": "^18.4.1",
-        "cypress": "^13.16.0",
-        "eslint": "9.15.0",
-        "eslint-config-prettier": "9.1.0",
+        "@angular-devkit/build-angular": "19.2.10",
+        "@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.10",
+        "@angular/compiler-cli": "19.2.9",
+        "@angular/language-service": "19.2.9",
+        "@commitlint/cli": "19.8.0",
+        "@commitlint/config-conventional": "19.8.0",
+        "@types/jasmine": "~5.1.7",
+        "@types/node": "22.15.3",
+        "@typescript-eslint/eslint-plugin": "^8.31.1",
+        "@web/test-runner": "^0.20.1",
+        "angular-eslint": "^19.3.0",
+        "cypress": "^14.3.2",
+        "eslint": "9.26.0",
+        "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.4.0",
+        "jasmine-core": "5.7.1",
         "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.8.0",
+        "semantic-release": "24.2.3",
         "semantic-release-export-data": "^1.1.0",
-        "stylelint": "16.10.0",
+        "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",
         "type-coverage": "^2.29.7",
-        "typescript": "5.6.3",
-        "typescript-eslint": "^8.15.0",
+        "typescript": "5.8.3",
+        "typescript-eslint": "^8.31.1",
         "tailwindcss": "^3.4.15",
-        "bun-types": "^1.1.36",
-        "postcss": "8.4.49",
+        "bun-types": "^1.2.12",
+        "postcss": "8.5.3",
         "postcss-nesting": "13.0.1",
         "cssnano": "7.0.6",
         "postcss-scss": "4.0.9"

projects/ngx-copypaste-lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ngx-copypaste",
-    "version": "19.0.0",
+    "version": "19.0.1",
     "license": "MIT",
     "keywords": [
         "ng2-copypaste",

src/app/cards/cards.component.html

@@ -33,7 +33,7 @@
                 <div class="flex flex-col gap-30px">
                     @switch (card.cardType) {
                         @case (cardTypeInput) {
-                            <div class="customInput">
+                            <div class="input">
                                 <input
                                     placeholder="Start Typing"
                                     class=""
@@ -45,7 +45,7 @@
                             </div>
                         }
                         @case (cardTypeTextarea) {
-                            <div class="customInput">
+                            <div class="input">
                                 <textarea
                                     ngxCopyPaste
                                     placeholder="Start Typing"
@@ -56,7 +56,7 @@
                             </div>
                         }
                         @case (cardTypeSuccess) {
-                            <div class="customInput">
+                            <div class="input">
                                 <input placeholder="Start Typing" #c3="copy" ngxCopyPaste />
                                 <jsdaddy-open-source-copied-button
                                     class="copy-position"

src/app/cards/cards.component.scss

@@ -1,6 +1,6 @@
 :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;
-    .customInput {
+    .input {
         @apply flex justify-between w-full h-[51px] text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px gap-2.5 focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25;
         input,
         textarea {

src/app/cards/cards.component.ts

@@ -32,6 +32,7 @@ export class CardsComponent {
 
     private readonly scrollService = inject(ScrollService);
     public readonly activeCardId = toSignal(this.scrollService.activeCard$);
+
     public constructor() {
         effect(() => {
             this.scrollService.onScroll(this.cards());

src/app/shared/copied/copied.component.html

@@ -1,6 +1,5 @@
 <button
-    class="copy-btn flex items-center bg-full-white w-fit h-[31px] text-black text-span rounded-4px gap-2.5 px-6 py-5px"
-    [class]="copyButtonClass"
+    [ngClass]="[copyButtonClass, 'copy-btn flex items-center bg-full-white w-fit h-[31px] text-black text-span rounded-4px gap-2.5 px-6 py-5px']"
     (click)="copyText()">
     <span class="default-text">Copy</span>
     <span class="active-text">Copied</span>

src/app/shared/copied/copied.component.ts

@@ -1,5 +1,5 @@
 import { Component, DestroyRef, inject } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { NgClass, NgOptimizedImage } from '@angular/common';
 import { AssetPipe } from '@libraries/asset/asset.pipe';
 import { SharedAssetPath } from './copied.path';
 import { delay, of } from 'rxjs';
@@ -8,7 +8,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Component({
     selector: 'jsdaddy-open-source-copied-button',
     standalone: true,
-    imports: [NgOptimizedImage, AssetPipe],
+    imports: [NgOptimizedImage, AssetPipe, NgClass],
     templateUrl: './copied.component.html',
     styleUrls: ['./copied.component.scss'],
 })