angular 18 update complete (#12)

* angular 18 update complete

* Update package.json

---------

Co-authored-by: Dikshit Moradiya <dixit.moradia@phoenixcoded.co>

angular.json

@@ -33,8 +33,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1mb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1.2mb",
+                  "maximumError": "1.2mb"
                 },
                 {
                   "type": "anyComponentStyle",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "berry-free-angular-admin-template",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "author": "CodedThemes",
   "license": "MIT",
   "scripts": {
@@ -12,37 +12,37 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^17.1.0",
-    "@angular/cdk": "^17.1.0",
-    "@angular/common": "^17.1.0",
-    "@angular/compiler": "^17.1.0",
-    "@angular/core": "^17.1.0",
-    "@angular/forms": "^17.1.0",
-    "@angular/platform-browser": "^17.1.0",
-    "@angular/platform-browser-dynamic": "^17.1.0",
-    "@angular/router": "^17.1.0",
+    "@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",
     "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.45.1",
-    "bootstrap": "^5.3.2",
-    "ng-apexcharts": "^1.8.0",
+    "apexcharts": "^3.49.0",
+    "bootstrap": "^5.3.3",
+    "ng-apexcharts": "^1.10.0",
     "ngx-scrollbar": "^13.0.3",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.1.0",
-    "@angular/cli": "~17.1.0",
-    "@angular/compiler-cli": "^17.1.0",
+    "@angular-devkit/build-angular": "^18.0.0-next.3",
+    "@angular/cli": "~18.0.0-next.3",
+    "@angular/compiler-cli": "^18.0.0-next.3",
     "@types/jasmine": "~5.1.4",
-    "jasmine-core": "~5.1.1",
-    "karma": "~6.4.2",
+    "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.4",
-    "typescript": "~5.2.2"
+    "prettier": "3.2.5",
+    "typescript": "5.4"
   }
 }

src/app/app-config.ts

@@ -1,4 +1,4 @@
 export class BerryConfig {
   static isCollapse_menu: boolean = false;
-  static fontFamily: string = 'Roboto'; // Roboto, poppins, inter
+  static font_family: string = 'Roboto'; // Roboto, poppins, inter
 }

src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
       },
       {
         path: 'default',
-        loadComponent: () => import('./demo/default/default.component')
+        loadComponent: () => import('./demo/default/default.component').then((c) => c.DefaultComponent)
       },
       {
         path: 'typography',

src/app/demo/default/bajaj-chart/bajaj-chart.component.html

@@ -0,0 +1,10 @@
+<apx-chart
+  [series]="chartOptions.series"
+  [chart]="chartOptions.chart"
+  [dataLabels]="chartOptions.dataLabels"
+  [plotOptions]="chartOptions.plotOptions"
+  [responsive]="chartOptions.responsive"
+  [colors]="chartOptions.colors"
+  [tooltip]="chartOptions.tooltip"
+  [stroke]="chartOptions.stroke"
+></apx-chart>

src/app/demo/default/bajaj-chart/bajaj-chart.component.ts

@@ -0,0 +1,84 @@
+// angular import
+import { Component, ViewChild } from '@angular/core';
+
+// project import
+import { SharedModule } from 'src/app/theme/shared/shared.module';
+
+// third party
+import {
+  NgApexchartsModule,
+  ApexChart,
+  ChartComponent,
+  ApexDataLabels,
+  ApexAxisChartSeries,
+  ApexTooltip,
+  ApexPlotOptions,
+  ApexResponsive,
+  ApexStroke
+} from 'ng-apexcharts';
+
+export type ChartOptions = {
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  dataLabels: ApexDataLabels;
+  plotOptions: ApexPlotOptions;
+  responsive: ApexResponsive[];
+  colors: string[];
+  stroke: ApexStroke;
+  tooltip: ApexTooltip;
+};
+
+@Component({
+  selector: 'app-bajaj-chart',
+  standalone: true,
+  imports: [SharedModule, NgApexchartsModule],
+  templateUrl: './bajaj-chart.component.html',
+  styleUrl: './bajaj-chart.component.scss'
+})
+export class BajajChartComponent {
+  // public props
+  @ViewChild('chart') chart!: ChartComponent;
+  chartOptions!: Partial<ChartOptions>;
+
+  // constructor
+  constructor() {
+    this.chartOptions = {
+      chart: {
+        type: 'area',
+        height: 95,
+        stacked: true,
+        sparkline: {
+          enabled: true
+        },
+        background: 'transparent'
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 1
+      },
+      series: [
+        {
+          data: [0, 15, 10, 50, 30, 40, 25]
+        }
+      ],
+      tooltip: {
+        theme: 'light',
+        fixed: {
+          enabled: false
+        },
+        x: {
+          show: false
+        },
+        y: {
+          title: {
+            formatter: () => 'Ticket '
+          }
+        },
+        marker: {
+          show: false
+        }
+      },
+      colors: ['#673ab7']
+    };
+  }
+}

src/app/demo/default/bar-chart/bar-chart.component.html

@@ -0,0 +1,27 @@
+<div class="card">
+  <div class="card-body">
+    <div class="row mb-3 align-items-center">
+      <div class="col">
+        <div class="text-sm">Total Growth</div>
+        <h3 class="mt-2 f-w-600">$2,324.00</h3>
+      </div>
+      <div class="col-auto">
+        <select class="form-select p-r-35" title="Select">
+          <option>Today</option>
+          <option selected>Month</option>
+          <option>Year</option>
+        </select>
+      </div>
+    </div>
+    <apx-chart
+      [series]="chartOptions.series"
+      [chart]="chartOptions.chart"
+      [dataLabels]="chartOptions.dataLabels"
+      [plotOptions]="chartOptions.plotOptions"
+      [responsive]="chartOptions.responsive"
+      [xaxis]="chartOptions.xaxis"
+      [colors]="chartOptions.colors"
+      [tooltip]="chartOptions.tooltip"
+    ></apx-chart>
+  </div>
+</div>

src/app/demo/default/bar-chart/bar-chart.component.ts

@@ -0,0 +1,106 @@
+// angular import
+import { Component, ViewChild } from '@angular/core';
+
+// project import
+import { SharedModule } from 'src/app/theme/shared/shared.module';
+
+// third party
+import {
+  NgApexchartsModule,
+  ApexChart,
+  ChartComponent,
+  ApexDataLabels,
+  ApexAxisChartSeries,
+  ApexXAxis,
+  ApexYAxis,
+  ApexTooltip,
+  ApexPlotOptions,
+  ApexResponsive
+} from 'ng-apexcharts';
+
+export type ChartOptions = {
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  dataLabels: ApexDataLabels;
+  plotOptions: ApexPlotOptions;
+  responsive: ApexResponsive[];
+  xaxis: ApexXAxis;
+  colors: string[];
+  yaxis: ApexYAxis;
+  tooltip: ApexTooltip;
+};
+
+@Component({
+  selector: 'app-bar-chart',
+  standalone: true,
+  imports: [NgApexchartsModule, SharedModule],
+  templateUrl: './bar-chart.component.html',
+  styleUrl: './bar-chart.component.scss'
+})
+export class BarChartComponent {
+  // public props
+  @ViewChild('chart') chart!: ChartComponent;
+  chartOptions!: Partial<ChartOptions>;
+
+  // Constructor
+  constructor() {
+    this.chartOptions = {
+      series: [
+        {
+          name: 'Investment',
+          data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75]
+        },
+        {
+          name: 'Loss',
+          data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75]
+        },
+        {
+          name: 'Profit',
+          data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10]
+        },
+        {
+          name: 'Maintenance',
+          data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0]
+        }
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      chart: {
+        type: 'bar',
+        height: 480,
+        stacked: true,
+        toolbar: {
+          show: true
+        },
+        background: 'transparent'
+      },
+      colors: ['#d3eafd', '#2196f3', '#673ab7', '#ede7f6'],
+      responsive: [
+        {
+          breakpoint: 480,
+          options: {
+            legend: {
+              position: 'bottom',
+              offsetX: -10,
+              offsetY: 0
+            }
+          }
+        }
+      ],
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '50%'
+        }
+      },
+      xaxis: {
+        type: 'category',
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+      },
+      tooltip: {
+        theme: 'light'
+      }
+    };
+  }
+}

src/app/demo/default/chart-data-month/chart-data-month.component.html

@@ -0,0 +1,36 @@
+<div class="row">
+  <div class="col">
+    <div class="avatar avatar-lg">
+      <i class="text-white ti ti-credit-card"></i>
+    </div>
+  </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>
+  </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>
+    <p class="mb-0 opacity-50">C/W Last Year</p>
+  </div>
+  <div class="col-6">
+    <div id="chart text-dark">
+      <apx-chart
+        [series]="chartOptions.series"
+        [chart]="chartOptions.chart"
+        [dataLabels]="chartOptions.dataLabels"
+        [yaxis]="chartOptions.yaxis"
+        [colors]="chartOptions.colors"
+        [stroke]="chartOptions.stroke"
+        [tooltip]="chartOptions.tooltip"
+      ></apx-chart>
+    </div>
+  </div>
+</div>

src/app/demo/default/chart-data-month/chart-data-month.component.scss

@@ -0,0 +1,34 @@
+.chart-income {
+  .active {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    text-transform: capitalize;
+    font-family: Roboto, sans-serif;
+    font-size: 0.8125rem;
+    line-height: 1.75;
+    min-width: 64px;
+    padding: 4px 10px;
+    transition:
+      background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    background-color: rgb(33, 150, 243);
+    box-shadow: none;
+    font-weight: 500;
+    border-radius: 4px;
+    color: inherit;
+  }
+}