Merge pull request #18 from Celtian/feat/angular-17

Feat/angular 17
Celtian · Dec 27, 2023 · ab74aeb · ab74aeb
2 parents 6cf7b90 + 162eb15
commit ab74aeb
Show file tree

Hide file tree

Showing 14 changed files with 2,735 additions and 2,843 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -8,5 +8,7 @@ _None_
 
 ## Checklist before requesting a review
 
-- [ ] I have performed a self-review of my code
+- [ ] I have performed a self-review of my code.
 - [ ] If it is a core feature, I have added thorough tests.
+- [ ] I have checked that affected pages are responsive.
+- [ ] I have checked that there are no z-index issues on affected pages.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -11,82 +11,82 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
+      - name: 🗜️ Checkout
         uses: actions/checkout@v3
 
-      - name: Setup node version
+      - name: 🗜️ Setup node version
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install
+      - name: 🛠️ Install
         uses: ./.github/actions/cached-deps
 
-      - name: Lint
+      - name: 🌡️ Lint
         run: yarn lint
 
-      - name: Sync versions # Sync versions
+      - name: 🛠️ Sync versions # Sync versions
         run: yarn syncprojects
 
-      - name: Build demo app # Build Schematics and move
+      - name: 📦 Build demo app # Build Schematics and move
         run: yarn build:demo --base-href https://celtian.github.io/ngx-cut/
 
-      - name: Build ngx-cut # Build
+      - name: 📦 Build ngx-cut # Build
         run: yarn build
 
-      - name: Run tests
+      - name: 🧪 Run tests
         run: yarn test --code-coverage --configuration=ci
 
-      - name: Upload coverage reports
+      - name: ⬆️ Upload coverage reports
         uses: codecov/codecov-action@v2
         with:
           token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos
           fail_ci_if_error: true
           verbose: false
           dry_run: false
 
-      - name: Publish NPM
+      - name: 🚀 Publish NPM
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         run: cd dist/ngx-cut && npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 
-      - name: Publish NPM BETA
+      - name: 🚀 Publish NPM BETA
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == true
         run: cd dist/ngx-cut && npm publish --tag beta
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 
       # Publish to GitHub Package Registry
-      - name: Set up package for GPR
+      - name: 🛠️ Set up package for GPR
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         run: yarn gpr:setup
 
-      - name: Use GPR
+      - name: 🛠️ Use GPR
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://npm.pkg.github.com/
           scope: '@celtian'
 
-      - name: Publish to GitHub Package Registry
+      - name: 🚀 Publish to GitHub Package Registry
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         run: |
           cd dist/ngx-cut
           npm publish
         env:
           NODE_AUTH_TOKEN: ${{github.token}}
 
-      - name: Copy index.html to 404.html
+      - name: 🛠️ Copy index.html to 404.html
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
-        run: cp ./dist/demo/index.html ./dist/demo/404.html
+        run: cp ./dist/demo/browser/index.html ./dist/demo/browser/404.html
 
-      - name: Deploy Github Pages
+      - name: 🚀 Deploy Github Pages
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         uses: peaceiris/actions-gh-pages@v3
         with:
           deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           publish_branch: gh-pages
-          publish_dir: ./dist/demo
+          publish_dir: ./dist/demo/browser
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -7,34 +7,34 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
+      - name: 🗜️ Checkout
         uses: actions/checkout@v3
 
-      - name: Setup node version
+      - name: 🗜️ Setup node version
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install
+      - name: 🛠️ Install
         uses: ./.github/actions/cached-deps
 
-      - name: Lint
+      - name: 🌡️ Lint
         run: yarn lint
 
-      - name: Sync versions # Sync versions
+      - name: 🛠️ Sync versions # Sync versions
         run: yarn syncprojects
 
-      - name: Build demo app # Build Schematics and move
+      - name: 📦 Build demo app # Build Schematics and move
         run: yarn build:demo --base-href https://celtian.github.io/ngx-cut/
 
-      - name: Build ngx-cut # Build
+      - name: 📦 Build ngx-cut # Build
         run: yarn build
 
-      - name: Run tests
+      - name: 🧪 Run tests
         run: yarn test --configuration=ci
 
-      - name: Upload coverage reports
+      - name: ⬆️ Upload coverage reports
         uses: codecov/codecov-action@v2
         with:
           token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
 
 > Angular directive for cutting texts with responsive options
 
-> ✓ _Angular 16, Ivy and SSR compatible_
+> ✓ _Angular 17 compatible_
 
 Here's the [demo](http://celtian.github.io/ngx-cut/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-cut) or [codesandbox live preview](https://codesandbox.io/s/ngx-cut-j2ryu)
 
@@ -34,9 +34,31 @@ Here's the [demo](http://celtian.github.io/ngx-cut/) or [stackblitz live preview
 yarn add ngx-cut
 ```
 
-2. Add NgxCutModule into your module `imports`
+2. Add `NgxCutModule` into your `imports`
 
 ```typescript
+
+  export const appConfig: ApplicationConfig = {
+    providers: [
+      importProvidersFrom(
+        BrowserModule,
+        NgxCutModule.forRoot({
+          size: 1,
+          breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
+          responsiveSizes: {
+            xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
+            sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
+            md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
+            lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
+            xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
+          }
+        })
+      )
+    ]
+  };
+
+  // or
+
   import { NgxCutModule } from 'ngx-cut';
 
   @NgModule({

diff --git a/angular.json b/angular.json
@@ -60,12 +60,14 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/demo",
             "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
+            "browser": "projects/demo/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [
               "projects/demo/src/favicon.ico",
@@ -75,9 +77,7 @@
               "projects/demo/src/styles.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true
@@ -95,8 +95,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -115,18 +113,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           }
         },
         "test": {

diff --git a/package.json b/package.json
@@ -36,51 +36,51 @@
     "fix-vulnerabilities": "npx yarn-audit-fix && npx browserslist --update-db"
   },
   "dependencies": {
-    "@angular/animations": "^16.2.0",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
-    "@angular/router": "^16.2.0",
+    "@angular/animations": "^17.0.8",
+    "@angular/common": "^17.0.8",
+    "@angular/compiler": "^17.0.8",
+    "@angular/core": "^17.0.8",
+    "@angular/forms": "^17.0.8",
+    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/router": "^17.0.8",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.1",
-    "zone.js": "^0.13.1"
+    "tslib": "^2.6.2",
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular-eslint/builder": "16.1.0",
-    "@angular-eslint/eslint-plugin": "16.1.0",
-    "@angular-eslint/eslint-plugin-template": "16.1.0",
-    "@angular-eslint/schematics": "16.1.0",
-    "@angular-eslint/template-parser": "16.1.0",
-    "@angular/cli": "^16.2.0",
-    "@angular/compiler-cli": "^16.2.0",
-    "@angular/language-service": "^16.2.0",
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@types/jasmine": "^4.3.5",
-    "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^18.17.5",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
+    "@angular-devkit/build-angular": "^17.0.8",
+    "@angular-eslint/builder": "17.1.1",
+    "@angular-eslint/eslint-plugin": "17.1.1",
+    "@angular-eslint/eslint-plugin-template": "17.1.1",
+    "@angular-eslint/schematics": "17.1.1",
+    "@angular-eslint/template-parser": "17.1.1",
+    "@angular/cli": "^17.0.8",
+    "@angular/compiler-cli": "^17.0.8",
+    "@angular/language-service": "^17.0.8",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@types/jasmine": "^5.1.4",
+    "@types/jasminewd2": "^2.0.13",
+    "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "auto-changelog": "^2.4.0",
-    "eslint": "^8.47.0",
+    "eslint": "^8.56.0",
     "husky": "^8.0.3",
-    "jasmine-core": "^5.1.0",
+    "jasmine-core": "^5.1.1",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "lint-staged": "^14.0.0",
-    "ng-packagr": "^16.2.0",
-    "prettier": "^3.0.1",
+    "lint-staged": "^15.2.0",
+    "ng-packagr": "^17.0.3",
+    "prettier": "^3.1.1",
     "protractor": "~7.0.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "ts-node": "^10.9.2",
+    "typescript": "5.2.2"
   },
   "peerDependencies": {},
   "homepage": "https://github.com/Celtian/ngx-cut",
@@ -109,7 +109,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=18 <20"
+    "node": ">=20 <22"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"