diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml index 0d528ec..f9ffec5 100644 --- a/.github/workflows/prod.yml +++ b/.github/workflows/prod.yml @@ -22,24 +22,24 @@ jobs: - name: 🚚 Get latest code uses: actions/checkout@v2 - - name: Install Node.js 18 + - name: Install Node.js 20 uses: actions/setup-node@v1 with: - node-version: "18.x" + 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 env: SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} # ARGS: "-rltgoDzvO --delete" - SOURCE: "dist/" + SOURCE: 'dist/' REMOTE_HOST: 217.21.92.35 REMOTE_USER: u778408432 - REMOTE_PORT: "65002" + REMOTE_PORT: '65002' TARGET: domains/codedthemes.com/public_html/demos/admin-templates/datta-able/angular/free - EXCLUDE: "/node_modules/" + EXCLUDE: '/node_modules/' diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d29b0e5 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "bracketSpacing": true, + "printWidth": 140, + "singleQuote": true, + "trailingComma": "none", + "tabWidth": 2, + "useTabs": false, + "htmlWhitespaceSensitivity": "ignore", + "bracketSameLine": false +} diff --git a/angular.json b/angular.json index 1d2714b..66b2b8a 100644 --- a/angular.json +++ b/angular.json @@ -25,10 +25,7 @@ "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets", "src/fake-data"], - "styles": [ - "node_modules/bootstrap/scss/bootstrap.scss", - "src/styles.scss" - ], + "styles": ["node_modules/bootstrap/scss/bootstrap.scss", "src/styles.scss"], "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"] }, "configurations": { diff --git a/karma.conf.js b/karma.conf.js index 41d30f3..44b9d27 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -3,14 +3,14 @@ module.exports = function (config) { config.set({ - basePath: "", - frameworks: ["jasmine", "@angular-devkit/build-angular"], + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ - require("karma-jasmine"), - require("karma-chrome-launcher"), - require("karma-jasmine-html-reporter"), - require("karma-coverage"), - require("@angular-devkit/build-angular/plugins/karma"), + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') ], client: { jasmine: { @@ -19,23 +19,23 @@ module.exports = function (config) { // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, - clearContext: false, // leave Jasmine Spec Runner output visible in browser + clearContext: false // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { - suppressAll: true, // removes the duplicated traces + suppressAll: true // removes the duplicated traces }, coverageReporter: { - dir: require("path").join(__dirname, "./coverage/datta-able-free"), - subdir: ".", - reporters: [{ type: "html" }, { type: "text-summary" }], + dir: require('path').join(__dirname, './coverage/datta-able-free'), + subdir: '.', + reporters: [{ type: 'html' }, { type: 'text-summary' }] }, - reporters: ["progress", "kjhtml"], + reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ["Chrome"], + browsers: ['Chrome'], singleRun: false, - restartOnFileChange: true, + restartOnFileChange: true }); }; diff --git a/package.json b/package.json index c817342..bb8a17f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "datta-able-free-angular-admin-template", - "version": "5.0.0", + "version": "5.1.0", "author": "CodedThemes", "scripts": { "ng": "ng", @@ -12,40 +12,40 @@ }, "private": false, "dependencies": { - "@angular/animations": "^18.0.0-next.3", - "@angular/cdk": "^18.0.0-next.3", - "@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/localize": "^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/localize": "^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", "screenfull": "^6.0.2", - "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", - "@types/node": "^20.12.7", + "@types/node": "^20.14.9", "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/app-routing.module.ts b/src/app/app-routing.module.ts index 8c01827..0a9c967 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,44 +11,33 @@ const routes: Routes = [ { path: '', redirectTo: 'dashboard', - pathMatch: 'full', + pathMatch: 'full' }, { path: 'dashboard', - loadComponent: () => import('./demo/dashboard/dashboard.component'), + loadComponent: () => import('./demo/dashboard/dashboard.component') }, { path: 'basic', - loadChildren: () => - import('./demo/ui-elements/ui-basic/ui-basic.module').then( - (m) => m.UiBasicModule, - ), + loadChildren: () => import('./demo/ui-elements/ui-basic/ui-basic.module').then((m) => m.UiBasicModule) }, { path: 'forms', - loadChildren: () => - import('./demo/pages/form-elements/form-elements.module').then( - (m) => m.FormElementsModule, - ), + loadChildren: () => import('./demo/pages/form-elements/form-elements.module').then((m) => m.FormElementsModule) }, { path: 'tables', - loadChildren: () => - import('./demo/pages/tables/tables.module').then( - (m) => m.TablesModule, - ), + loadChildren: () => import('./demo/pages/tables/tables.module').then((m) => m.TablesModule) }, { path: 'apexchart', - loadComponent: () => - import('./demo/chart/apex-chart/apex-chart.component'), + loadComponent: () => import('./demo/chart/apex-chart/apex-chart.component') }, { path: 'sample-page', - loadComponent: () => - import('./demo/extra/sample-page/sample-page.component'), - }, - ], + loadComponent: () => import('./demo/extra/sample-page/sample-page.component') + } + ] }, { path: '', @@ -56,17 +45,14 @@ const routes: Routes = [ children: [ { path: 'auth', - loadChildren: () => - import('./demo/pages/authentication/authentication.module').then( - (m) => m.AuthenticationModule, - ), - }, - ], - }, + loadChildren: () => import('./demo/pages/authentication/authentication.module').then((m) => m.AuthenticationModule) + } + ] + } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], + exports: [RouterModule] }) export class AppRoutingModule {} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d11108f..4e62072 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ import { NavigationEnd, Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], + styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'datta-able'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 31f58a5..1736912 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -40,17 +40,10 @@ import { ToggleFullScreenDirective } from './theme/shared/components/full-screen NavGroupComponent, NavItemComponent, NavSearchComponent, - ToggleFullScreenDirective, - ], - imports: [ - BrowserModule, - AppRoutingModule, - FormsModule, - ReactiveFormsModule, - SharedModule, - BrowserAnimationsModule, + ToggleFullScreenDirective ], + imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, SharedModule, BrowserAnimationsModule], providers: [NavigationItem], - bootstrap: [AppComponent], + bootstrap: [AppComponent] }) export class AppModule {} diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.ts b/src/app/demo/chart/apex-chart/apex-chart.component.ts index 1219d30..a689b3a 100644 --- a/src/app/demo/chart/apex-chart/apex-chart.component.ts +++ b/src/app/demo/chart/apex-chart/apex-chart.component.ts @@ -22,7 +22,7 @@ import { ApexFill, ApexTooltip, ApexTitleSubtitle, - ApexGrid, + ApexGrid } from 'ng-apexcharts'; export type ChartOptions = { @@ -48,7 +48,7 @@ export type ChartOptions = { standalone: true, imports: [SharedModule, NgApexchartsModule], templateUrl: './apex-chart.component.html', - styleUrls: ['./apex-chart.component.scss'], + styleUrls: ['./apex-chart.component.scss'] }) export default class ApexChartComponent { @ViewChild('chart') chart: ChartComponent; @@ -64,84 +64,74 @@ export default class ApexChartComponent { series: [ { name: 'Net Profit', - data: [44, 55, 57, 56, 61, 58, 63, 60, 66], + data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', - data: [76, 85, 101, 98, 87, 105, 91, 114, 94], + data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, { name: 'Free Cash Flow', - data: [35, 41, 36, 26, 45, 48, 52, 53, 41], - }, + data: [35, 41, 36, 26, 45, 48, 52, 53, 41] + } ], chart: { type: 'bar', - height: 350, + height: 350 }, plotOptions: { bar: { horizontal: false, - columnWidth: '55%', - }, + columnWidth: '55%' + } }, dataLabels: { - enabled: false, + enabled: false }, stroke: { show: true, width: 2, - colors: ['transparent'], + colors: ['transparent'] }, xaxis: { - categories: [ - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - ], + categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] }, yaxis: { title: { - text: '$ (thousands)', - }, + text: '$ (thousands)' + } }, fill: { - opacity: 1, + opacity: 1 }, tooltip: { y: { formatter: function (val) { return '$ ' + val + ' thousands'; - }, - }, - }, + } + } + } }; this.barStackedChart = { series: [ { name: 'PRODUCT A', - data: [44, 55, 41, 67, 22, 43, 21, 49], + data: [44, 55, 41, 67, 22, 43, 21, 49] }, { name: 'PRODUCT B', - data: [13, 23, 20, 8, 13, 27, 33, 12], + data: [13, 23, 20, 8, 13, 27, 33, 12] }, { name: 'PRODUCT C', - data: [11, 17, 15, 15, 21, 14, 15, 13], - }, + data: [11, 17, 15, 15, 21, 14, 15, 13] + } ], chart: { type: 'bar', height: 350, stacked: true, - stackType: '100%', + stackType: '100%' }, responsive: [ { @@ -150,88 +140,72 @@ export default class ApexChartComponent { legend: { position: 'bottom', offsetX: -10, - offsetY: 0, - }, - }, - }, + offsetY: 0 + } + } + } ], xaxis: { - categories: [ - '2011 Q1', - '2011 Q2', - '2011 Q3', - '2011 Q4', - '2012 Q1', - '2012 Q2', - '2012 Q3', - '2012 Q4', - ], + categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'] }, fill: { - opacity: 1, + opacity: 1 }, legend: { position: 'right', offsetX: 0, - offsetY: 50, - }, + offsetY: 50 + } }; this.areaAngleChart = { chart: { height: 380, type: 'area', - stacked: false, + stacked: false }, stroke: { - curve: 'straight', + curve: 'straight' }, series: [ { name: 'Music', - data: [11, 15, 26, 20, 33, 27], + data: [11, 15, 26, 20, 33, 27] }, { name: 'Photos', - data: [32, 33, 21, 42, 19, 32], - }, + data: [32, 33, 21, 42, 19, 32] + } ], xaxis: { - categories: [ - '2011 Q1', - '2011 Q2', - '2011 Q3', - '2011 Q4', - '2012 Q1', - '2012 Q2', - ], + categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2'] }, tooltip: { - followCursor: true, + followCursor: true }, fill: { - opacity: 1, - }, + opacity: 1 + } }; this.areaSmoothChart = { series: [ { name: 'series1', - data: [31, 40, 28, 51, 42, 109, 100], + data: [31, 40, 28, 51, 42, 109, 100] }, { name: 'series2', - data: [11, 32, 45, 32, 34, 52, 41], - }, + data: [11, 32, 45, 32, 34, 52, 41] + } ], chart: { height: 350, - type: 'area', + type: 'area' }, dataLabels: { - enabled: false, + enabled: false }, stroke: { - curve: 'smooth', + curve: 'smooth' }, xaxis: { type: 'datetime', @@ -242,84 +216,78 @@ export default class ApexChartComponent { '2018-09-19T03:30:00.000Z', '2018-09-19T04:30:00.000Z', '2018-09-19T05:30:00.000Z', - '2018-09-19T06:30:00.000Z', - ], + '2018-09-19T06:30:00.000Z' + ] }, tooltip: { x: { - format: 'dd/MM/yy HH:mm', - }, - }, + format: 'dd/MM/yy HH:mm' + } + } }; this.lineAreaChart = { series: [ { name: 'Desktops', - data: [20, 55, 45, 75, 50, 75, 100], + data: [20, 55, 45, 75, 50, 75, 100] }, { name: 'Desktops', - data: [10, 45, 35, 65, 40, 65, 90], - }, + data: [10, 45, 35, 65, 40, 65, 90] + } ], chart: { height: 350, type: 'line', zoom: { - enabled: false, - }, + enabled: false + } }, dataLabels: { - enabled: false, + enabled: false }, stroke: { - curve: 'straight', + curve: 'straight' }, title: { text: 'Product Trends by Month', - align: 'left', + align: 'left' }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns - opacity: 0.5, - }, + opacity: 0.5 + } }, xaxis: { - categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], - }, + categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'] + } }; this.donutChart = { chart: { type: 'donut', width: '100%', - height: 350, + height: 350 }, dataLabels: { - enabled: false, + enabled: false }, plotOptions: { pie: { customScale: 0.8, donut: { - size: '75%', + size: '75%' }, - offsetY: 20, - }, + offsetY: 20 + } }, colors: ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0'], series: [21, 23, 19, 14, 6], - labels: [ - 'Clothing', - 'Food Products', - 'Electronics', - 'Kitchen Utility', - 'Gardening', - ], + labels: ['Clothing', 'Food Products', 'Electronics', 'Kitchen Utility', 'Gardening'], legend: { position: 'left', - offsetY: 80, - }, + offsetY: 80 + } }; } } diff --git a/src/app/demo/dashboard/dashboard.component.html b/src/app/demo/dashboard/dashboard.component.html index 10c85cb..c5e0150 100644 --- a/src/app/demo/dashboard/dashboard.component.html +++ b/src/app/demo/dashboard/dashboard.component.html @@ -6,8 +6,8 @@
{{ sale.title }}

- {{ sale.amount }} + + {{ sale.amount }}

@@ -15,11 +15,7 @@

- +
@@ -37,15 +33,12 @@
Earnings

- $4295.36 + $4295.36 +

Total Earnings
-
+
@@ -82,29 +75,20 @@
-
+
- Target:{{ list.target }} + Target: + {{ list.target }}
- +
- Duration:{{ list.duration }} + Duration: + {{ list.duration }}
- +
@@ -116,12 +100,14 @@

- 4.7 + 4.7 +

- 0.4 + 0.4 +
@@ -129,16 +115,12 @@
@for (list of progressing; track list) {
- {{ list.number }} + + {{ list.number }}
{{ list.amount }}
- +
} @@ -146,23 +128,14 @@
{{ list.amount }}
- +
@for (table of tables; track table) { } diff --git a/src/app/demo/dashboard/dashboard.component.ts b/src/app/demo/dashboard/dashboard.component.ts index 5ac182c..b1943b7 100644 --- a/src/app/demo/dashboard/dashboard.component.ts +++ b/src/app/demo/dashboard/dashboard.component.ts @@ -24,7 +24,7 @@ import mapColor from 'src/fake-data/map-color-data.json'; standalone: true, imports: [SharedModule], templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'], + styleUrls: ['./dashboard.component.scss'] }) export default class DashboardComponent implements OnInit { ngOnInit() { @@ -57,8 +57,7 @@ export default class DashboardComponent implements OnInit { const dataItem = mapData[i]; value = dataItem.value; - let square = - ((value - min) / (max - min)) * (maxSquare - minSquare) + minSquare; + let square = ((value - min) / (max - min)) * (maxSquare - minSquare) + minSquare; if (square < minSquare) { square = minSquare; } @@ -74,7 +73,7 @@ export default class DashboardComponent implements OnInit { longitude: latlong[id].longitude, latitude: latlong[id].latitude, title: dataItem.name + '
[ ' + value + ' ]', - value: value, + value: value }); } @@ -85,42 +84,42 @@ export default class DashboardComponent implements OnInit { dataProvider: { map: 'worldLow', - images: images, + images: images }, export: { - enabled: true, - }, + enabled: true + } }); const chartDatac = [ { day: 'Mon', - value: 60, + value: 60 }, { day: 'Tue', - value: 45, + value: 45 }, { day: 'Wed', - value: 70, + value: 70 }, { day: 'Thu', - value: 55, + value: 55 }, { day: 'Fri', - value: 70, + value: 70 }, { day: 'Sat', - value: 55, + value: 55 }, { day: 'Sun', - value: 70, - }, + value: 70 + } ]; // widget-line-chart @@ -137,8 +136,8 @@ export default class DashboardComponent implements OnInit { id: 'blur', feGaussianBlur: { in: 'SourceGraphic', - stdDeviation: '30', - }, + stdDeviation: '30' + } }, { id: 'shadow', @@ -150,25 +149,25 @@ export default class DashboardComponent implements OnInit { result: 'offOut', in: 'SourceAlpha', dx: '0', - dy: '20', + dy: '20' }, feGaussianBlur: { result: 'blurOut', in: 'offOut', - stdDeviation: '10', + stdDeviation: '10' }, feColorMatrix: { result: 'blurOut', type: 'matrix', - values: '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0', + values: '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0' }, feBlend: { in: 'SourceGraphic', in2: 'blurOut', - mode: 'normal', - }, - }, - ], + mode: 'normal' + } + } + ] }, fontSize: 15, dataProvider: chartDatac, @@ -181,7 +180,7 @@ export default class DashboardComponent implements OnInit { axisAlpha: 0, lineAlpha: 0, offset: -20, - inside: true, + inside: true }, valueAxes: [ { @@ -191,8 +190,8 @@ export default class DashboardComponent implements OnInit { axisAlpha: 0, lineAlpha: 0, minimum: 0, - maximum: 100, - }, + maximum: 100 + } ], chartCursor: { valueLineEnabled: false, @@ -202,7 +201,7 @@ export default class DashboardComponent implements OnInit { valueZoomable: false, cursorColor: '#fff', categoryBalloonColor: '#51b4e6', - valueLineAlpha: 0, + valueLineAlpha: 0 }, graphs: [ { @@ -226,10 +225,10 @@ export default class DashboardComponent implements OnInit { lineThickness: 2, useLineColorForBulletBorder: true, valueField: 'value', - balloonText: '[[value]]', - }, - }, - ], + balloonText: '[[value]]' + } + } + ] }); }, 500); } @@ -241,7 +240,7 @@ export default class DashboardComponent implements OnInit { amount: '$249.95', percentage: '67%', progress: 50, - design: 'col-md-6', + design: 'col-md-6' }, { title: 'Monthly Sales', @@ -249,7 +248,7 @@ export default class DashboardComponent implements OnInit { amount: '$2.942.32', percentage: '36%', progress: 35, - design: 'col-md-6', + design: 'col-md-6' }, { title: 'Yearly Sales', @@ -257,8 +256,8 @@ export default class DashboardComponent implements OnInit { amount: '$8.638.32', percentage: '80%', progress: 70, - design: 'col-md-12', - }, + design: 'col-md-12' + } ]; card = [ @@ -266,13 +265,13 @@ export default class DashboardComponent implements OnInit { design: 'border-bottom', number: '235', text: 'TOTAL IDEAS', - icon: 'icon-zap text-c-green', + icon: 'icon-zap text-c-green' }, { number: '26', text: 'TOTAL LOCATIONS', - icon: 'icon-map-pin text-c-blue', - }, + icon: 'icon-map-pin text-c-blue' + } ]; social_card = [ @@ -285,7 +284,7 @@ export default class DashboardComponent implements OnInit { target: '35,098', progress: 60, duration: '3,539', - progress2: 45, + progress2: 45 }, { design: 'col-md-6', @@ -296,7 +295,7 @@ export default class DashboardComponent implements OnInit { target: '34,185', progress: 40, duration: '4,567', - progress2: 70, + progress2: 70 }, { design: 'col-md-6', @@ -307,36 +306,36 @@ export default class DashboardComponent implements OnInit { target: '25,998', progress: 80, duration: '7,753', - progress2: 50, - }, + progress2: 50 + } ]; progressing = [ { number: '5', amount: '384', - progress: 70, + progress: 70 }, { number: '4', amount: '145', - progress: 35, + progress: 35 }, { number: '3', amount: '24', - progress: 25, + progress: 25 }, { number: '2', amount: '1', - progress: 10, + progress: 10 }, { number: '1', amount: '0', - progress: 0, - }, + progress: 0 + } ]; tables = [ @@ -345,35 +344,35 @@ export default class DashboardComponent implements OnInit { title: 'Isabella Christensen', text: 'Lorem Ipsum is simply dummy', time: '11 MAY 12:56', - color: 'text-c-green', + color: 'text-c-green' }, { src: 'assets/images/user/avatar-2.jpg', title: 'Ida Jorgensen', text: 'Lorem Ipsum is simply', time: '11 MAY 10:35', - color: 'text-c-red', + color: 'text-c-red' }, { src: 'assets/images/user/avatar-3.jpg', title: 'Mathilda Andersen', text: 'Lorem Ipsum is simply dummy', time: '9 MAY 17:38', - color: 'text-c-green', + color: 'text-c-green' }, { src: 'assets/images/user/avatar-1.jpg', title: 'Karla Soreness', text: 'Lorem Ipsum is simply', time: '19 MAY 12:56', - color: 'text-c-red', + color: 'text-c-red' }, { src: 'assets/images/user/avatar-2.jpg', title: 'Albert Andersen', text: 'Lorem Ipsum is', time: '21 July 12:56', - color: 'text-c-green', - }, + color: 'text-c-green' + } ]; } diff --git a/src/app/demo/extra/sample-page/sample-page.component.html b/src/app/demo/extra/sample-page/sample-page.component.html index b60db28..b10cade 100644 --- a/src/app/demo/extra/sample-page/sample-page.component.html +++ b/src/app/demo/extra/sample-page/sample-page.component.html @@ -2,13 +2,10 @@

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum." + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum."

diff --git a/src/app/demo/extra/sample-page/sample-page.component.ts b/src/app/demo/extra/sample-page/sample-page.component.ts index e6f1b52..4b121b4 100644 --- a/src/app/demo/extra/sample-page/sample-page.component.ts +++ b/src/app/demo/extra/sample-page/sample-page.component.ts @@ -6,6 +6,6 @@ import { SharedModule } from 'src/app/theme/shared/shared.module'; standalone: true, imports: [SharedModule], templateUrl: './sample-page.component.html', - styleUrls: ['./sample-page.component.scss'], + styleUrls: ['./sample-page.component.scss'] }) export default class SamplePageComponent {} diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html index 8f4c52c..cc2b610 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html @@ -20,21 +20,18 @@

Login

- - + +

- Forgot password? Reset + Forgot password? + Reset

- Don’t have an account? Sign up + Don’t have an account? + Sign up

diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts index 587cffc..d0fc352 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts @@ -6,6 +6,6 @@ import { RouterModule } from '@angular/router'; standalone: true, imports: [RouterModule], templateUrl: './auth-signin.component.html', - styleUrls: ['./auth-signin.component.scss'], + styleUrls: ['./auth-signin.component.scss'] }) export default class AuthSigninComponent {} diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html index 5dc61ec..ba4fac0 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html @@ -23,31 +23,24 @@

Sign up

- - + +
- - + +

Already have an account? - Log in + Log in

diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts index 1c2049f..079a685 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts @@ -6,6 +6,6 @@ import { RouterModule } from '@angular/router'; standalone: true, imports: [RouterModule], templateUrl: './auth-signup.component.html', - styleUrls: ['./auth-signup.component.scss'], + styleUrls: ['./auth-signup.component.scss'] }) export default class AuthSignupComponent {} diff --git a/src/app/demo/pages/authentication/authentication-routing.module.ts b/src/app/demo/pages/authentication/authentication-routing.module.ts index dbe03cb..dfe005b 100644 --- a/src/app/demo/pages/authentication/authentication-routing.module.ts +++ b/src/app/demo/pages/authentication/authentication-routing.module.ts @@ -7,18 +7,18 @@ const routes: Routes = [ children: [ { path: 'signin', - loadComponent: () => import('./auth-signin/auth-signin.component'), + loadComponent: () => import('./auth-signin/auth-signin.component') }, { path: 'signup', - loadComponent: () => import('./auth-signup/auth-signup.component'), - }, - ], - }, + loadComponent: () => import('./auth-signup/auth-signup.component') + } + ] + } ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule], + exports: [RouterModule] }) export class AuthenticationRoutingModule {} diff --git a/src/app/demo/pages/authentication/authentication.module.ts b/src/app/demo/pages/authentication/authentication.module.ts index bcfb4ea..95008dd 100644 --- a/src/app/demo/pages/authentication/authentication.module.ts +++ b/src/app/demo/pages/authentication/authentication.module.ts @@ -5,6 +5,6 @@ import { AuthenticationRoutingModule } from './authentication-routing.module'; @NgModule({ declarations: [], - imports: [CommonModule, AuthenticationRoutingModule], + imports: [CommonModule, AuthenticationRoutingModule] }) export class AuthenticationModule {} diff --git a/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.html b/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.html index 127be44..19aa575 100644 --- a/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.html +++ b/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.html @@ -8,35 +8,16 @@
Form controls
- - We'll never share your email with anyone else. + + We'll never share your email with anyone else.
- +
- - + +
@@ -59,11 +40,7 @@
Form controls
- +
@@ -72,21 +49,9 @@
Sizing

- - - + + +
+ +
@@ -118,42 +76,22 @@
Datalist
Readonly

- +
Readonly plain Text

- +
- +
- +
- +
@@ -161,32 +99,16 @@
Readonly plain Text
Inline

- +
- +
- +
@
- +
@@ -199,14 +121,8 @@
Inline
- - + +
@@ -218,40 +134,20 @@
Form Grid
- +
- +
- +
- +
@@ -284,74 +180,32 @@
Horizontal Form

- +
- +
- +
- +
- +
- - + +
- - + +
- - + +
@@ -360,14 +214,8 @@
Horizontal Form
Checkbox
- - + +
@@ -383,46 +231,21 @@
Horizontal Form Label Sizing

- +
- +
- +
- +
- +
- +
@@ -431,29 +254,15 @@
Horizontal Form Label Sizing
Help Text

- - Your password must be 8-20 characters long, contain letters and - numbers, and must not contain spaces, special characters, or - emoji. + + + Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +
- - Must be 8-20 characters long. + + Must be 8-20 characters long.
Validation
@@ -462,36 +271,18 @@
Validation
- +
Looks good!
- +
Looks good!
- @ + @ Validation
- +
Please provide a valid city.
- +
Please provide a valid state.
- +
Please provide a valid zip.
- - -
- You must agree before submitting. -
+ + +
You must agree before submitting.
@@ -563,53 +326,23 @@
Supported Elements
- -
- Please enter a message in the textarea. -
+ +
Please enter a message in the textarea.
- - + +
Example invalid feedback text
- - + +
- - + +
More example invalid feedback text
@@ -624,25 +357,16 @@
Supported Elements
- +
Example invalid form file feedback
- +
- +
Tooltips

@@ -650,37 +374,19 @@
Tooltips
- +
Looks good!
- +
Looks good!
- @ + @ Tooltips required />
-
- Please choose a unique and valid username. -
+
Please choose a unique and valid username.
- +
Please provide a valid city.
- +
Please provide a valid state.
- +
Please provide a valid zip.
@@ -738,59 +424,29 @@
Checkboxes

- +
Radios

- - + +
- - + +
Inline

- - + +
- - + +
@@ -799,22 +455,9 @@
Range
- + - +
@@ -823,13 +466,7 @@
Range
@ - +
Range
- https://example.com/users/ - + https://example.com/users/ +
$ - + .00
@@ -871,37 +497,16 @@
Range
Sizing

- Small - + Small +
- Default - + Default +
- Large - + Large +
@@ -909,33 +514,15 @@
Checkboxes and radios

- +
- +
- +
- +
@@ -953,19 +540,11 @@
Multiple addons
$ 0.00 - +
- + $ 0.00
@@ -976,13 +555,7 @@
Button Addons
- + Button Addons aria-label="Recipient's username" aria-describedby="button-addon2" /> - +
- - - + + +
Button Addons placeholder="Recipient's username" aria-label="Recipient's username with two button addons" /> - - + +
Buttons With Dropdowns

-
- -
- + - -
diff --git a/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.ts b/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.ts index 4a9aed9..8b838de 100644 --- a/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.ts +++ b/src/app/demo/pages/form-elements/basic-elements/basic-elements.component.ts @@ -7,6 +7,6 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; standalone: true, imports: [SharedModule, NgbDropdownModule], templateUrl: './basic-elements.component.html', - styleUrls: ['./basic-elements.component.scss'], + styleUrls: ['./basic-elements.component.scss'] }) export default class BasicElementsComponent {} diff --git a/src/app/demo/pages/form-elements/form-elements-routing.module.ts b/src/app/demo/pages/form-elements/form-elements-routing.module.ts index ba9f888..c7def96 100644 --- a/src/app/demo/pages/form-elements/form-elements-routing.module.ts +++ b/src/app/demo/pages/form-elements/form-elements-routing.module.ts @@ -7,15 +7,14 @@ const routes: Routes = [ children: [ { path: 'basic', - loadComponent: () => - import('./basic-elements/basic-elements.component'), - }, - ], - }, + loadComponent: () => import('./basic-elements/basic-elements.component') + } + ] + } ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule], + exports: [RouterModule] }) export class FormElementsRoutingModule {} diff --git a/src/app/demo/pages/form-elements/form-elements.module.ts b/src/app/demo/pages/form-elements/form-elements.module.ts index 62065ff..ac1db0e 100644 --- a/src/app/demo/pages/form-elements/form-elements.module.ts +++ b/src/app/demo/pages/form-elements/form-elements.module.ts @@ -5,6 +5,6 @@ import { FormElementsRoutingModule } from './form-elements-routing.module'; @NgModule({ declarations: [], - imports: [CommonModule, FormElementsRoutingModule], + imports: [CommonModule, FormElementsRoutingModule] }) export class FormElementsModule {} diff --git a/src/app/demo/pages/tables/tables-routing.module.ts b/src/app/demo/pages/tables/tables-routing.module.ts index 73eecc8..56a1bba 100644 --- a/src/app/demo/pages/tables/tables-routing.module.ts +++ b/src/app/demo/pages/tables/tables-routing.module.ts @@ -7,14 +7,14 @@ const routes: Routes = [ children: [ { path: 'bootstrap', - loadComponent: () => import('./tbl-bootstrap/tbl-bootstrap.component'), - }, - ], - }, + loadComponent: () => import('./tbl-bootstrap/tbl-bootstrap.component') + } + ] + } ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule], + exports: [RouterModule] }) export class TablesRoutingModule {} diff --git a/src/app/demo/pages/tables/tables.module.ts b/src/app/demo/pages/tables/tables.module.ts index 728ef0e..d9bcdfb 100644 --- a/src/app/demo/pages/tables/tables.module.ts +++ b/src/app/demo/pages/tables/tables.module.ts @@ -5,6 +5,6 @@ import { TablesRoutingModule } from './tables-routing.module'; @NgModule({ declarations: [], - imports: [CommonModule, TablesRoutingModule], + imports: [CommonModule, TablesRoutingModule] }) export class TablesModule {} diff --git a/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.html b/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.html index 65f5a44..5ce4866 100644 --- a/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.html +++ b/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.html @@ -1,10 +1,6 @@
- +
- activity-user + activity-user
{{ table.title }}
@@ -170,20 +143,13 @@
{{ table.title }}
- {{ table.time }} + + {{ table.time }}
- RejectApprove + Reject + Approve
@@ -40,11 +36,7 @@
- +
@@ -80,11 +72,7 @@
- +
@@ -120,11 +108,7 @@
- +
@@ -160,11 +144,7 @@
- +
@@ -236,11 +216,7 @@
- +
@@ -312,11 +288,7 @@
- +
@@ -352,11 +324,7 @@
- +
@@ -392,11 +360,7 @@
- +
@@ -432,11 +396,7 @@
- +
@@ -480,11 +440,7 @@
- +
diff --git a/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.ts b/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.ts index d168bdf..609d660 100644 --- a/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.ts +++ b/src/app/demo/pages/tables/tbl-bootstrap/tbl-bootstrap.component.ts @@ -6,6 +6,6 @@ import { SharedModule } from 'src/app/theme/shared/shared.module'; standalone: true, imports: [SharedModule], templateUrl: './tbl-bootstrap.component.html', - styleUrls: ['./tbl-bootstrap.component.scss'], + styleUrls: ['./tbl-bootstrap.component.scss'] }) export default class TblBootstrapComponent {} diff --git a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html index ae8a80b..b73e6b2 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html +++ b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html @@ -1,33 +1,57 @@
-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
+

+ Example heading + New +

+

+ Example heading + New +

+

+ Example heading + New +

+

+ Example heading + New +

+
+ Example heading + New +
+
+ Example heading + New +
diff --git a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.ts b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.ts index ce02cfa..a8bd39a 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.ts +++ b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.ts @@ -6,6 +6,6 @@ import { SharedModule } from 'src/app/theme/shared/shared.module'; standalone: true, imports: [SharedModule], templateUrl: './basic-badge.component.html', - styleUrls: ['./basic-badge.component.scss'], + styleUrls: ['./basic-badge.component.scss'] }) export default class BasicBadgeComponent {} diff --git a/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html b/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html index 00919ec..6537189 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html +++ b/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html @@ -2,8 +2,11 @@

- use class .btn-* in class .btn class to get - various button + use class + .btn-* + in class + .btn + class to get various button

@@ -18,8 +21,11 @@

- use class .btn-outline-* in class .btn class - to get various outline button + use class + .btn-outline-* + in class + .btn + class to get various outline button

@@ -33,13 +39,14 @@

- use .btn-square in class .btn class to get - square button + use + .btn-square + in class + .btn + class to get square button

- + @@ -50,13 +57,14 @@

- use .disabled in class .btn class to get - Disabled button + use + .disabled + in class + .btn + class to get Disabled button

- + @@ -67,13 +75,14 @@

- use .btn-rounded in class .btn class to get - Rounded button + use + .btn-rounded + in class + .btn + class to get Rounded button

- + @@ -81,101 +90,57 @@

- use .btn-rounded in class .btn-outline-* class - to get Rounded Outline button + use + .btn-rounded + in class + .btn-outline-* + class to get Rounded Outline button

- - - - - - - + + + + + + +

- use .btn-glow in class .btn class to get Glow - button + use + .btn-glow + in class + .btn + class to get Glow button

- - - - - - - + +

- use .shadow-[1 / 2 / 3 / 4 / 5] in class - .btn class to get Shadow button + use + .shadow-[1 / 2 / 3 / 4 / 5] + in class + .btn + class to get Shadow button

@@ -187,124 +152,57 @@

- use .btn-lg in class .btn class to get Large - button + use + .btn-lg + in class + .btn + class to get Large button

- +

- use .btn-sm in class .btn class to get Small - button + use + .btn-sm + in class + .btn + class to get Small button

- +
- - - - - - + + + + + +

- - - - - - + + + + + +

- - - - - - + + + + + +
@@ -313,93 +211,29 @@
- + - + - +

- + - + - +

- - - - - + + + + +
@@ -408,44 +242,56 @@
@@ -517,31 +363,19 @@
- - - - +
Action Another action @@ -567,9 +401,7 @@
- +
Action Another action @@ -577,9 +409,7 @@
- +
Action Another action @@ -587,9 +417,7 @@
- +
Action Another action @@ -597,9 +425,7 @@
- +
Action Another action @@ -607,9 +433,7 @@
- +
Action Another action @@ -622,11 +446,7 @@
-
@@ -639,11 +459,7 @@
-
@@ -656,11 +472,7 @@
-
@@ -673,11 +485,7 @@
-
@@ -690,11 +498,7 @@
-
@@ -707,11 +511,7 @@
-
@@ -727,9 +527,7 @@
- +
Action Another action @@ -737,13 +535,7 @@
- +
Action Another action @@ -751,9 +543,7 @@
- +
Action Another action @@ -761,9 +551,7 @@
- +
Action Another action @@ -771,9 +559,7 @@
- +
Action Another action @@ -781,9 +567,7 @@
- +
Action Another action @@ -796,11 +580,7 @@
-
@@ -812,14 +592,8 @@
- - +
@@ -832,11 +606,7 @@
-
@@ -849,11 +619,7 @@
-
@@ -866,11 +632,7 @@
-
@@ -883,11 +645,7 @@
-
@@ -903,11 +661,7 @@
-
@@ -917,11 +671,7 @@
-
@@ -931,11 +681,7 @@
-
@@ -955,11 +701,7 @@
-
@@ -983,11 +725,7 @@
-
@@ -997,11 +735,7 @@
-
@@ -1011,11 +745,7 @@
-
@@ -1025,11 +755,7 @@
-
@@ -1039,11 +765,7 @@
-
@@ -1053,11 +775,7 @@
-
@@ -1071,11 +789,7 @@
-
@@ -1085,11 +799,7 @@
-
@@ -1099,11 +809,7 @@
-
@@ -1113,11 +819,7 @@
-
@@ -1127,11 +829,7 @@
-
@@ -1141,11 +839,7 @@
-
@@ -1159,11 +853,7 @@
-
@@ -1173,11 +863,7 @@
-
@@ -1187,11 +873,7 @@
-
@@ -1201,11 +883,7 @@
-
@@ -1215,11 +893,7 @@
-
@@ -1229,11 +903,7 @@
-
@@ -1286,14 +956,13 @@

- use .btn-group-lg in class - .btn-group class to get large size button group + use + .btn-group-lg + in class + .btn-group + class to get large size button group

-
+
@@ -1301,14 +970,13 @@

- use .btn-group-sm in class - .btn-group class to get small size button group + use + .btn-group-sm + in class + .btn-group + class to get small size button group

-
+
@@ -1323,9 +991,7 @@
- +
Dropdown link Dropdown link @@ -1338,32 +1004,19 @@
-
+
-
+
-