package upgrade done (#14) (#15)

* package upgrade done (#14) * version change * yml file update * yml file update as per review change
codedthemes · Jul 8, 2024 · cefc193 · cefc193
1 parent b918a85
commit cefc193
Show file tree

Hide file tree

Showing 20 changed files with 1,866 additions and 1,775 deletions.
diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
@@ -22,18 +22,18 @@ jobs:
       - name: 🚚 Get latest code
         uses: actions/checkout@v2
 
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v2-beta
         with:
-          node-version: '18'
+          node-version: '20.x'
 
       - name: 🔨 Build Project
         run: |
-          npm i --legacy-peer-deps
-          npm run build-prod
+          yarn
+          yarn build-prod
 
       - name: 📂 Deploy to Server
-        uses: easingthemes/ssh-deploy@v2.1.5
+        uses: easingthemes/ssh-deploy@main
         env:
           SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
           # ARGS: "-rltgoDzvO --delete"

diff --git a/.prettierrc b/.prettierrc
@@ -5,6 +5,6 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "useTabs": false,
-  "htmlWhitespaceSensitivity": "strict",
+  "htmlWhitespaceSensitivity": "ignore",
   "bracketSameLine": false
 }
diff --git a/README.md b/README.md
@@ -12,17 +12,17 @@ Berry is a free angular admin dashboard template built with Angular and latest B
 
 [Pro version](https://berrydashboard.io/angular/default) of Berry Angular Dashboard template contains features like TypeScript, Apps, Authentication Methods (i.e. JWT), Advance Components, Form Plugins, Layouts, Widgets, and many more.
 
-| [Berry Free](https://berrydashboard.io/angular/free/) | [Berry](https://codedthemes.com/item/berry-angular-admin-dashboard-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium)             |
-| ----------------------------------------------------- | :---------------------------------------------------------------------------------------- |
-| **9** Demo pages                                      | **45+** demo pages                                                                        |
-| -                                                     | ✓ Multi-language                                                                          |
-| -                                                     | ✓ Dark/Light Mode 🌓                                                                      |
-| -                                                     | ✓ TypeScript version                                                                      |
-| -                                                     | ✓ Design files (Figma)                                                                    |
-| -                                                     | ✓ 6+ color Options                                                                        |
-| -                                                     | ✓ RTL                                                                                     |
-| -                                                     | ✓ JWT authentications                                                                     |
-| -                                                     | ✓ [More components](https://berrydashboard.io/angular/default/basic/alert)                |
+| [Berry Free](https://berrydashboard.io/angular/free/) | [Berry](https://codedthemes.com/item/berry-angular-admin-dashboard-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) |
+| ----------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **9** Demo pages                                      | **45+** demo pages                                                                                                                                             |
+| -                                                     | ✓ Multi-language                                                                                                                                               |
+| -                                                     | ✓ Dark/Light Mode 🌓                                                                                                                                           |
+| -                                                     | ✓ TypeScript version                                                                                                                                           |
+| -                                                     | ✓ Design files (Figma)                                                                                                                                         |
+| -                                                     | ✓ 6+ color Options                                                                                                                                             |
+| -                                                     | ✓ RTL                                                                                                                                                          |
+| -                                                     | ✓ JWT authentications                                                                                                                                          |
+| -                                                     | ✓ [More components](https://berrydashboard.io/angular/default/basic/alert)                                                                                     |
 
 ## Why Berry?
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "berry-free-angular-admin-template",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": "CodedThemes",
   "license": "MIT",
   "scripts": {
@@ -12,37 +12,37 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.0-next.3",
-    "@angular/cdk": "^17.3.6",
-    "@angular/common": "^18.0.0-next.3",
-    "@angular/compiler": "^18.0.0-next.3",
-    "@angular/core": "^18.0.0-next.3",
-    "@angular/forms": "^18.0.0-next.3",
-    "@angular/platform-browser": "^18.0.0-next.3",
-    "@angular/platform-browser-dynamic": "^18.0.0-next.3",
-    "@angular/router": "^18.0.0-next.3",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@angular/animations": "^18.0.5",
+    "@angular/cdk": "^18.0.5",
+    "@angular/common": "^18.0.5",
+    "@angular/compiler": "^18.0.5",
+    "@angular/core": "^18.0.5",
+    "@angular/forms": "^18.0.5",
+    "@angular/platform-browser": "^18.0.5",
+    "@angular/platform-browser-dynamic": "^18.0.5",
+    "@angular/router": "^18.0.5",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.49.0",
+    "apexcharts": "^3.49.2",
     "bootstrap": "^5.3.3",
-    "ng-apexcharts": "^1.10.0",
-    "ngx-scrollbar": "^13.0.3",
+    "ng-apexcharts": "^1.11.0",
+    "ngx-scrollbar": "^15.0.1",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0-next.3",
-    "@angular/cli": "~18.0.0-next.3",
-    "@angular/compiler-cli": "^18.0.0-next.3",
+    "@angular-devkit/build-angular": "^18.0.6",
+    "@angular/cli": "~18.0.6",
+    "@angular/compiler-cli": "^18.0.5",
     "@types/jasmine": "~5.1.4",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.3",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
     "typescript": "5.4"
   }
 }
diff --git a/src/app/demo/default/chart-data-month/chart-data-month.component.html b/src/app/demo/default/chart-data-month/chart-data-month.component.html
@@ -6,18 +6,21 @@
   </div>
   <div class="col-auto">
     <div class="d-flex align-items-center gap-2 chart-income">
-      <div class="btn btn-sm text-white" [ngClass]="this.btnActive === 'month' ? 'btn-primary' : ''" (click)="toggleActive('month')"
-        >Month</div
-      >
-      <div class="btn btn-sm text-white" [ngClass]="this.btnActive === 'year' ? 'btn-primary' : ''" (click)="toggleActive('year')"
-        >Year</div
-      >
+      <div class="btn btn-sm text-white" [ngClass]="this.btnActive === 'month' ? 'btn-primary' : ''" (click)="toggleActive('month')">
+        Month
+      </div>
+      <div class="btn btn-sm text-white" [ngClass]="this.btnActive === 'year' ? 'btn-primary' : ''" (click)="toggleActive('year')">
+        Year
+      </div>
     </div>
   </div>
 </div>
 <div class="row">
   <div class="col-6">
-    <span class="text-white d-block f-34 f-w-500 my-2">${{ amount }} <i class="ti ti-circle-arrow-up-right opacity-50"></i></span>
+    <span class="text-white d-block f-34 f-w-500 my-2">
+      ${{ amount }}
+      <i class="ti ti-circle-arrow-up-right opacity-50"></i>
+    </span>
     <p class="mb-0 opacity-50">C/W Last Year</p>
   </div>
   <div class="col-6">

diff --git a/src/app/demo/default/default.component.html b/src/app/demo/default/default.component.html
@@ -22,7 +22,10 @@
             </div>
           </div>
         </div>
-        <span class="text-white d-block f-34 f-w-500 my-2">$500.00 <i class="ti ti-circle-arrow-up-right opacity-50"></i></span>
+        <span class="text-white d-block f-34 f-w-500 my-2">
+          $500.00
+          <i class="ti ti-circle-arrow-up-right opacity-50"></i>
+        </span>
         <p class="mb-0 opacity-50">Total Earning</p>
       </div>
     </div>
@@ -75,7 +78,7 @@ <h4 class="f-w-600 mb-1">$203k</h4>
           <div class="col">
             <h4>Popular Stocks</h4>
           </div>
-          <div class="col-auto"> </div>
+          <div class="col-auto"></div>
         </div>
         <div class="rounded bg-light-secondary overflow-hidden mb-3">
           <div class="px-3 pt-3">
@@ -101,18 +104,21 @@ <h5 class="mb-0">{{ list.name }}</h5>
                 </div>
                 <div class="col-auto">
                   <h4 class="mb-0">
-                    {{ list.invest
-                    }}<span class="ms-2 align-top avatar avatar-xxs {{ list.bgColor }}"
-                      ><i class="{{ list.icon }} {{ list.color }}"></i
-                    ></span>
+                    {{ list.invest }}
+                    <span class="ms-2 align-top avatar avatar-xxs {{ list.bgColor }}">
+                      <i class="{{ list.icon }} {{ list.color }}"></i>
+                    </span>
                   </h4>
                 </div>
               </div>
             </li>
           }
         </ul>
         <div class="text-center">
-          <a href="javascript:" class="b-b-primary text-primary f-w-500">View all <i class="ti ti-chevron-right"></i></a>
+          <a href="javascript:" class="b-b-primary text-primary f-w-500">
+            View all
+            <i class="ti ti-chevron-right"></i>
+          </a>
         </div>
       </div>
     </div>

diff --git a/src/app/demo/elements/element-color/element-color.component.html b/src/app/demo/elements/element-color/element-color.component.html
@@ -50,15 +50,15 @@ <h5>Text Color</h5>
             <div class="p-3 color-block text-blue-900" data-clipboard-text="text-blue-900">text-blue-900</div>
           </div>
           <div class="col-md-6 mb-3">
-            <div class="p-3 color-block text-purple-100" data-clipboard-text="text-purple-100">text-purple-100 </div>
-            <div class="p-3 color-block text-purple-200" data-clipboard-text="text-purple-200">text-purple-200 </div>
-            <div class="p-3 color-block text-purple-300" data-clipboard-text="text-purple-300">text-purple-300 </div>
-            <div class="p-3 color-block text-purple-400" data-clipboard-text="text-purple-400">text-purple-400 </div>
-            <div class="p-3 color-block text-purple-500" data-clipboard-text="text-purple-500">text-purple-500 </div>
-            <div class="p-3 color-block text-purple-600" data-clipboard-text="text-purple-600">text-purple-600 </div>
-            <div class="p-3 color-block text-purple-700" data-clipboard-text="text-purple-700">text-purple-700 </div>
-            <div class="p-3 color-block text-purple-800" data-clipboard-text="text-purple-800">text-purple-800 </div>
-            <div class="p-3 color-block text-purple-900" data-clipboard-text="text-purple-900">text-purple-900 </div>
+            <div class="p-3 color-block text-purple-100" data-clipboard-text="text-purple-100">text-purple-100</div>
+            <div class="p-3 color-block text-purple-200" data-clipboard-text="text-purple-200">text-purple-200</div>
+            <div class="p-3 color-block text-purple-300" data-clipboard-text="text-purple-300">text-purple-300</div>
+            <div class="p-3 color-block text-purple-400" data-clipboard-text="text-purple-400">text-purple-400</div>
+            <div class="p-3 color-block text-purple-500" data-clipboard-text="text-purple-500">text-purple-500</div>
+            <div class="p-3 color-block text-purple-600" data-clipboard-text="text-purple-600">text-purple-600</div>
+            <div class="p-3 color-block text-purple-700" data-clipboard-text="text-purple-700">text-purple-700</div>
+            <div class="p-3 color-block text-purple-800" data-clipboard-text="text-purple-800">text-purple-800</div>
+            <div class="p-3 color-block text-purple-900" data-clipboard-text="text-purple-900">text-purple-900</div>
           </div>
         </div>
       </div>

diff --git a/src/app/demo/elements/typography/typography.component.html b/src/app/demo/elements/typography/typography.component.html
@@ -4,10 +4,11 @@
     <div class="card">
       <div class="card-header">
         <h5>Headings</h5>
-        <p
-          ><span class="badges">.h1</span> through .h6 classes are also available, for when you want to match the font styling of a heading
-          but cannot use the associated HTML element.</p
-        >
+        <p>
+          <span class="badges">.h1</span>
+          through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated
+          HTML element.
+        </p>
       </div>
       <div class="card-body">
         <h1>h1. Heading</h1>
@@ -47,7 +48,8 @@ <h5>Inline Text Elements</h5>
       <div class="card-body">
         <p class="lead mt-0">Your title goes here</p>
         You can use the mark tag to
-        <mark>highlight</mark> text.
+        <mark>highlight</mark>
+        text.
         <br />
         <del>This line of text is meant to be treated as deleted text.</del>
         <br />
@@ -65,13 +67,13 @@ <h5>Inline Text Elements</h5>
         <h5>Contextual Text Colors</h5>
       </div>
       <div class="card-body">
-        <p class="text-muted mb-1"> Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
-        <p class="text-primary mb-1"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
-        <p class="text-success mb-1"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>
-        <p class="text-info mb-1"> Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
-        <p class="text-warning mb-1"> Etiam porta sem malesuada magna mollis euismod. </p>
-        <p class="text-danger mb-1"> Donec ullamcorper nulla non metus auctor fringilla. </p>
-        <p class="text-dark mb-1"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+        <p class="text-muted mb-1">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+        <p class="text-primary mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        <p class="text-success mb-1">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+        <p class="text-info mb-1">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        <p class="text-warning mb-1">Etiam porta sem malesuada magna mollis euismod.</p>
+        <p class="text-danger mb-1">Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p class="text-dark mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       </div>
     </div>
   </div>
@@ -86,8 +88,8 @@ <h5>Unordered</h5>
           <li>Consectetur adipiscing elit</li>
           <li>Integer molestie lorem at massa</li>
           <li>Facilisis in pretium nisl aliquet</li>
-          <li
-            >Nulla volutpat aliquam velit
+          <li>
+            Nulla volutpat aliquam velit
             <ul>
               <li>Phasellus iaculis neque</li>
               <li>Purus sodales ultricies</li>
@@ -113,8 +115,8 @@ <h5>Ordered</h5>
           <li>Consectetur adipiscing elit</li>
           <li>Integer molestie lorem at massa</li>
           <li>Facilisis in pretium nisl aliquet</li>
-          <li
-            >Nulla volutpat aliquam velit
+          <li>
+            Nulla volutpat aliquam velit
             <ul>
               <li>Phasellus iaculis neque</li>
               <li>Purus sodales ultricies</li>
@@ -137,8 +139,8 @@ <h5>Unstyled</h5>
       <div class="card-body">
         <ul class="list-unstyled">
           <li>Lorem ipsum dolor sit amet</li>
-          <li
-            >Integer molestie lorem at massa
+          <li>
+            Integer molestie lorem at massa
             <ul>
               <li>Phasellus iaculis neque</li>
             </ul>
@@ -162,15 +164,25 @@ <h5>Inline</h5>
         <h5>Blockquotes</h5>
       </div>
       <div class="card-body">
-        <p class="text-muted mb-5"> Your awesome text goes here. </p>
+        <p class="text-muted mb-5">Your awesome text goes here.</p>
         <blockquote class="blockquote">
           <p class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+          <footer class="blockquote-footer">
+            Someone famous in
+            <cite title="Source Title">Source Title</cite>
+          </footer>
         </blockquote>
-        <p class="text-mutedmy-3"> Add <code>.text-end</code> for a blockquote with right-aligned content. </p>
+        <p class="text-mutedmy-3">
+          Add
+          <code>.text-end</code>
+          for a blockquote with right-aligned content.
+        </p>
         <blockquote class="blockquote text-end">
           <p class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+          <footer class="blockquote-footer">
+            Someone famous in
+            <cite title="Source Title">Source Title</cite>
+          </footer>
         </blockquote>
       </div>
     </div>
@@ -193,9 +205,9 @@ <h5>Horizontal Description</h5>
           <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
 
           <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
-          <dd class="col-sm-9"
-            >Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd
-          >
+          <dd class="col-sm-9">
+            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+          </dd>
         </dl>
       </div>
     </div>

diff --git a/src/app/demo/pages/authentication/login/login.component.html b/src/app/demo/pages/authentication/login/login.component.html
@@ -16,13 +16,14 @@ <h2 class="text-secondary mt-5"><b>Hi, Welcome Back</b></h2>
           </div>
           <div class="d-grid">
             <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
-              <img src="assets/images/authentication/google-icon.svg" />Sign In With Google
+              <img src="assets/images/authentication/google-icon.svg" />
+              Sign In With Google
             </button>
           </div>
           <div class="saprator mt-3">
             <span>or</span>
           </div>
-          <h5 class="my-4 d-flex justify-content-center"> Sign in with Email address </h5>
+          <h5 class="my-4 d-flex justify-content-center">Sign in with Email address</h5>
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" value="[email protected]" />
             <label for="floatingInput">Email address / Username</label>