Merge pull request #121 from JsDaddy/develop

feat(no-ref): ng18

.eslintrc.json

@@ -2,7 +2,7 @@
     "root": true,
     "overrides": [
         {
-            "files": ["*.ts"],
+            "files": ["**/*.ts"],
             "env": {
                 "es6": true
             },

package.json

@@ -1,115 +1,115 @@
 {
-    "name": "ngx-copypaste",
-    "description": "Awesome ngx copypaste directive",
-    "version": "17.3.2",
-    "license": "MIT",
-    "keywords": [
-        "ng2-copypaste",
-        "ngx-copypaste",
-        "ng2",
-        "ng",
-        "angular-copypaste",
-        "copypaste",
-        "angular",
-        "angular2",
-        "angular2-clipboard",
-        "ng2clipboard",
-        "jsdaddy",
-        "angular-clipboard",
-        "clipboard",
-        "angular2-clipboard",
-        "ng2clipboard",
-        "ng2-clipboard",
-        "ngx-clipboard"
-    ],
-    "scripts": {
-        "ng": "ng",
-        "start": "ng serve",
-        "build": "ng build ngx-copypaste --base-href /ngx-copypaste/ --configuration production",
-        "build:lib": "ng build --configuration production ngx-copypaste-lib && npm run copy-libdocs",
-        "copy-libdocs": "cp README.md LICENSE dist/ngx-copypaste-lib",
-        "publish:lib": "cd dist/ngx-copypaste-lib && npm publish",
-        "test": "ng test",
-        "test:pre-commit": "ng test --watch=false",
-        "lint": "ng lint && npm run lint:scss",
-        "lint:scss": "stylelint \"**/*.scss\"",
-        "lint:scss:fix": "stylelint \"**/*.scss\" --fix",
-        "init:git:hooks": ".github/scripts/setup_hooks.sh",
-        "cypress:open": "cypress open",
-        "cypress:bash": "npx cypress run --component",
-        "lint:fix": "ng lint --fix && npm run lint:scss:fix",
-        "prettier:fix": "npx prettier --write .",
-        "type-coverage-report": "typescript-coverage-report",
-        "type-coverage": "type-coverage"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/JsDaddy/ngx-copypaste.git"
-    },
-    "dependencies": {
-        "@angular/animations": "17.3.2",
-        "@angular/common": "17.3.2",
-        "@angular/compiler": "17.3.2",
-        "@angular/core": "17.3.2",
-        "@angular/forms": "17.3.2",
-        "@angular/platform-browser": "17.3.2",
-        "@angular/platform-browser-dynamic": "17.3.2",
-        "@angular/router": "^17.3.2",
-        "highlight.js": "^11.9.0",
-        "ngx-highlightjs": "^10.0.0",
-        "rxjs": "7.8.1"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "17.3.2",
-        "@angular-eslint/builder": "17.3.0",
-        "@angular-eslint/eslint-plugin": "17.3.0",
-        "@angular-eslint/eslint-plugin-template": "17.3.0",
-        "@angular-eslint/schematics": "17.3.0",
-        "@angular-eslint/template-parser": "17.3.0",
-        "@angular/cli": "17.3.2",
-        "@angular/compiler-cli": "17.3.2",
-        "@angular/language-service": "17.3.2",
-        "@commitlint/cli": "19.2.1",
-        "@commitlint/config-conventional": "19.1.0",
-        "@types/jasmine": "~5.1.4",
-        "@types/node": "20.11.30",
-        "@typescript-eslint/eslint-plugin": "^7.4.0",
-        "@web/test-runner": "^0.18.1",
-        "cypress": "^13.7.1",
-        "eslint": "8.57.0",
-        "eslint-config-prettier": "9.1.0",
-        "eslint-plugin-import": "2.29.1",
-        "eslint-plugin-json": "3.1.0",
-        "eslint-plugin-prettier": "5.1.3",
-        "jasmine-core": "5.1.2",
-        "jasmine-spec-reporter": "7.0.0",
-        "ng-packagr": "17.3.0",
-        "npm-check-updates": "^16.14.18",
-        "semantic-release": "23.0.6",
-        "semantic-release-export-data": "^1.0.1",
-        "type-coverage": "^2.27.1",
-        "postcss-scss": "4.0.9",
-        "prettier": "3.2.5",
-        "puppeteer": "^22.6.1",
-        "stylelint": "16.3.1",
-        "stylelint-config-prettier": "9.0.5",
-        "stylelint-config-recommended-scss": "14.0.0",
-        "stylelint-prettier": "5.0.0",
-        "typescript": "5.4.3"
-    },
-    "typeCoverage": {
-        "atLeast": 92,
-        "ignoreObject": true,
-        "ignoreAsAssertion": true,
-        "ignoreTypeAssertion;": true,
-        "strict": true,
-        "suppressError": true,
-        "reportSemanticError": true,
-        "ignoreCatch": true,
-        "ignoreFiles": [
-            "server/**/*.ts",
-            "server.ts"
-        ]
-    },
-    "private": true
+  "name": "ngx-copypaste",
+  "description": "Awesome ngx copypaste directive",
+  "version": "18.0.0",
+  "license": "MIT",
+  "keywords": [
+    "ng2-copypaste",
+    "ngx-copypaste",
+    "ng2",
+    "ng",
+    "angular-copypaste",
+    "copypaste",
+    "angular",
+    "angular2",
+    "angular2-clipboard",
+    "ng2clipboard",
+    "jsdaddy",
+    "angular-clipboard",
+    "clipboard",
+    "angular2-clipboard",
+    "ng2clipboard",
+    "ng2-clipboard",
+    "ngx-clipboard"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build ngx-copypaste --base-href /ngx-copypaste/ --configuration production",
+    "build:lib": "ng build --configuration production ngx-copypaste-lib && npm run copy-libdocs",
+    "copy-libdocs": "cp README.md LICENSE dist/ngx-copypaste-lib",
+    "publish:lib": "cd dist/ngx-copypaste-lib && npm publish",
+    "test": "ng test",
+    "test:pre-commit": "ng test --watch=false",
+    "lint": "ng lint && npm run lint:scss",
+    "lint:scss": "stylelint \"**/*.scss\"",
+    "lint:scss:fix": "stylelint \"**/*.scss\" --fix",
+    "init:git:hooks": ".github/scripts/setup_hooks.sh",
+    "cypress:open": "cypress open",
+    "cypress:bash": "npx cypress run --component",
+    "lint:fix": "ng lint --fix && npm run lint:scss:fix",
+    "prettier:fix": "npx prettier --write .",
+    "type-coverage-report": "typescript-coverage-report",
+    "type-coverage": "type-coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JsDaddy/ngx-copypaste.git"
+  },
+  "dependencies": {
+    "@angular/animations": "18.0.0",
+    "@angular/common": "18.0.0",
+    "@angular/compiler": "18.0.0",
+    "@angular/core": "18.0.0",
+    "@angular/forms": "18.0.0",
+    "@angular/platform-browser": "18.0.0",
+    "@angular/platform-browser-dynamic": "18.0.0",
+    "@angular/router": "^18.0.0",
+    "highlight.js": "^11.9.0",
+    "ngx-highlightjs": "^11.0.0",
+    "rxjs": "7.8.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "18.0.1",
+    "@angular-eslint/builder": "17.5.1",
+    "@angular-eslint/eslint-plugin": "17.5.1",
+    "@angular-eslint/eslint-plugin-template": "17.5.1",
+    "@angular-eslint/schematics": "17.5.1",
+    "@angular-eslint/template-parser": "17.5.1",
+    "@angular/cli": "18.0.1",
+    "@angular/compiler-cli": "18.0.0",
+    "@angular/language-service": "18.0.0",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
+    "@types/jasmine": "~5.1.4",
+    "@types/node": "20.12.12",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@web/test-runner": "^0.18.2",
+    "cypress": "^13.10.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-json": "3.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "jasmine-core": "5.1.2",
+    "jasmine-spec-reporter": "7.0.0",
+    "ng-packagr": "18.0.0",
+    "npm-check-updates": "^16.14.20",
+    "semantic-release": "23.1.1",
+    "semantic-release-export-data": "^1.0.1",
+    "type-coverage": "^2.28.2",
+    "postcss-scss": "4.0.9",
+    "prettier": "3.2.5",
+    "puppeteer": "^22.10.0",
+    "stylelint": "16.6.0",
+    "stylelint-config-prettier": "9.0.5",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-prettier": "5.0.0",
+    "typescript": "5.4.5"
+  },
+  "typeCoverage": {
+    "atLeast": 92,
+    "ignoreObject": true,
+    "ignoreAsAssertion": true,
+    "ignoreTypeAssertion;": true,
+    "strict": true,
+    "suppressError": true,
+    "reportSemanticError": true,
+    "ignoreCatch": true,
+    "ignoreFiles": [
+      "server/**/*.ts",
+      "server.ts"
+    ]
+  },
+  "private": true
 }

projects/ngx-copypaste-lib/package.json

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

projects/ngx-copypaste-lib/src/lib/ngx-copypaste.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, output } from '@angular/core';
+import { Directive, ElementRef, inject, output } from '@angular/core';
 
 @Directive({
     selector: '[ngxCopyPaste]',
@@ -8,9 +8,9 @@ import { Directive, ElementRef, output } from '@angular/core';
 export class NgxCopyPasteDirective {
     public successCb = output();
 
-    public constructor(private _elementRef: ElementRef) {}
+    private readonly _elementRef = inject(ElementRef);
 
-    public copy(): void {
+    private copyWithSelection(): void {
         let select: Selection | null = window.getSelection();
         if (select) {
             select.removeAllRanges();
@@ -29,4 +29,25 @@ export class NgxCopyPasteDirective {
         this.successCb.emit();
         document.execCommand('copy');
     }
+
+    public async copy(): Promise<void> {
+        try {
+            if (!navigator.clipboard) {
+                this.copyWithSelection();
+                return;
+            }
+            const element: HTMLElement = this._elementRef.nativeElement;
+            const value =
+                element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement
+                    ? element.value
+                    : element.textContent;
+            if (!value) {
+                return;
+            }
+            await navigator.clipboard.writeText(value.trim());
+            this.successCb.emit();
+        } catch (err) {
+            console.error('Error copying content: ', err);
+        }
+    }
 }

src/app/cards/cards.component.html

@@ -17,7 +17,7 @@
                     <span class="source uppercase ls-25 full-white span">Source code</span>
                     <div class="white-input">
                         <pre class="row">
-                                  <code type="text" [highlight]="card.code" class="input-view bg-white"></code>
+                                  <code type="text" language="html" [highlight]="card.code" class="input-view bg-white"></code>
                                   <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceCardsPath" class="input-img ais-c" alt="input-vector" />
                             </pre>
                     </div>

src/main.ts

@@ -1,4 +1,4 @@
-import { ɵprovideZonelessChangeDetection } from '@angular/core';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@@ -11,7 +11,7 @@ import { BaseHttpService } from '@libraries/base-http/base-http.service';
 
 bootstrapApplication(AppComponent, {
     providers: [
-        ɵprovideZonelessChangeDetection(),
+        provideExperimentalZonelessChangeDetection(),
         provideAnimations(),
         provideRouter([]),
         GithubStarsService,

tsconfig.json

@@ -28,7 +28,6 @@
         "useDefineForClassFields": false,
         "removeComments": true,
         "resolveJsonModule": true,
-        "allowSyntheticDefaultImports": true,
         "paths": {
             "ngx-copypaste": ["./projects/ngx-copypaste-lib/src/public-api"],
             "@open-source/*": ["./src/libraries/open-source/*"],