+
+
+ @for(productcard of productcards; track productcard.title) {
+
\ No newline at end of file
diff --git a/package/src/app/components/apps-blog/apps-blog.component.ts b/package/src/app/components/apps-blog/apps-blog.component.ts
new file mode 100644
index 0000000..e58c645
--- /dev/null
+++ b/package/src/app/components/apps-blog/apps-blog.component.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+
+interface productcards {
+ id: number;
+ imgSrc: string;
+ title: string;
+ price: string;
+ rprice: string;
+}
+
+
+@Component({
+ selector: 'app-blog',
+ standalone: true,
+ imports: [MatCardModule, MatChipsModule, TablerIconsModule, MatButtonModule, MatIconModule],
+ templateUrl: './apps-blog.component.html',
+})
+export class AppBlogComponent {
+ constructor() { }
+
+ productcards: productcards[] = [
+ {
+ id: 1,
+ imgSrc: '/assets/images/products/p1.jpg',
+ title: 'Boat Headphone',
+ price: '285',
+ rprice: '375',
+ },
+ {
+ id: 2,
+ imgSrc: '/assets/images/products/p2.jpg',
+ title: 'MacBook Air Pro',
+ price: '285',
+ rprice: '375',
+ },
+ {
+ id: 3,
+ imgSrc: '/assets/images/products/p3.jpg',
+ title: 'Red Valvet Dress',
+ price: '285',
+ rprice: '375',
+ },
+ {
+ id: 4,
+ imgSrc: '/assets/images/products/p4.jpg',
+ title: 'Cute Soft Teddybear',
+ price: '285',
+ rprice: '375',
+ },
+ ];
+}
diff --git a/package/src/app/components/product-sales/product-sales.component.html b/package/src/app/components/product-sales/product-sales.component.html
new file mode 100644
index 0000000..8978554
--- /dev/null
+++ b/package/src/app/components/product-sales/product-sales.component.html
@@ -0,0 +1,24 @@
+
+
+
+ 
+
+
+
+ {{
+ productcard.title
+ }}
+
+
+
+ }
+
+
+
+
+ ${{ productcard.price }}
+ ${{ productcard.rprice }} +
+
+
+
+
+
+
+ $6,820
+
+
+
+ +9%
+ last year
+
+ Profit & Expenses
+
+
+
+
+
+
+
+
+
+
+ Top Paying Clients
+
+
+
+
+
+
+
+ | + Profile + | +
+
+
+
+
+ + {{ element.uname }} ++ {{ element.position }} + |
+ + Hour Rate + | ++ ${{ element.hrate }}/hour + | ++ Skills + | ++ {{ element.skills }} + | ++ Status + | ++ + {{ element.priority | titlecase }} + + | +
|---|
+
+
+
+ $36,358
+
+
+
+
+ +9%
+ last year
+
+
+
+
+ Oragnic
+
+
+ Refferal
+
+
+
+ @for(stat of stats2; track stat.subtext) {
+
+
+
+ }
+ {{ stat.time }}
+
+
+
+
+
+ @if(stat.subtext) {
+ {{ stat.subtext }}
+ }
+
+ @if(stat.title) {
+ {{
+ stat.title
+ }}
+ }
+
+ @if(stat.link) {
+ #ML-3467
+ }
+
+
-
+
+@if(item.navCap) {
+
-
-
+
+}
+
+
+@if(expanded) {
+();
+ @Output() notify: EventEmitter = new EventEmitter();
+
+ expanded: any = false;
+ disabled: any = false;
+ twoLines: any = false;
+ @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
@Input() item: NavItem | any;
@Input() depth: any;
@@ -21,6 +59,10 @@ export class AppNavItemComponent implements OnChanges {
ngOnChanges() {
this.navService.currentUrl.subscribe((url: string) => {
if (this.item.route && url) {
+ // console.log(`Checking '/${this.item.route}' against '${url}'`);
+ this.expanded = url.indexOf(`/${this.item.route}`) === 0;
+ this.ariaExpanded = this.expanded;
+ //console.log(`${this.item.route} is expanded: ${this.expanded}`);
}
});
}
@@ -28,12 +70,29 @@ export class AppNavItemComponent implements OnChanges {
onItemSelected(item: NavItem) {
if (!item.children || !item.children.length) {
this.router.navigate([item.route]);
+
}
-
- // scroll
- document.querySelector('.page-wrapper')?.scroll({
+ if (item.children && item.children.length) {
+ this.expanded = !this.expanded;
+ }
+ //scroll
+ window.scroll({
top: 0,
left: 0,
+ behavior: 'smooth',
});
+ if (!this.expanded){
+ if (window.innerWidth < 1024) {
+ this.notify.emit();
+ }
+ }
+ }
+
+ onSubItemSelected(item: NavItem) {
+ if (!item.children || !item.children.length){
+ if (this.expanded && window.innerWidth < 1024) {
+ this.notify.emit();
+ }
+ }
}
}
diff --git a/package/src/app/layouts/full/sidebar/nav-item/nav-item.ts b/package/src/app/layouts/full/sidebar/nav-item/nav-item.ts
index a6274be..8d2f98b 100644
--- a/package/src/app/layouts/full/sidebar/nav-item/nav-item.ts
+++ b/package/src/app/layouts/full/sidebar/nav-item/nav-item.ts
@@ -12,4 +12,5 @@ export interface NavItem {
route?: string;
children?: NavItem[];
ddType?: string;
+ bgcolor?:string;
}
\ No newline at end of file
diff --git a/package/src/app/layouts/full/sidebar/sidebar-data.ts b/package/src/app/layouts/full/sidebar/sidebar-data.ts
index 5efb675..7d08037 100644
--- a/package/src/app/layouts/full/sidebar/sidebar-data.ts
+++ b/package/src/app/layouts/full/sidebar/sidebar-data.ts
@@ -7,6 +7,7 @@ export const navItems: NavItem[] = [
{
displayName: 'Dashboard',
iconName: 'layout-dashboard',
+ bgcolor: 'primary',
route: '/dashboard',
},
{
@@ -15,26 +16,31 @@ export const navItems: NavItem[] = [
{
displayName: 'Badge',
iconName: 'rosette',
+ bgcolor: 'accent',
route: '/ui-components/badge',
},
{
displayName: 'Chips',
iconName: 'poker-chip',
+ bgcolor: 'warning',
route: '/ui-components/chips',
},
{
displayName: 'Lists',
iconName: 'list',
+ bgcolor: 'success',
route: '/ui-components/lists',
},
{
displayName: 'Menu',
iconName: 'layout-navbar-expand',
+ bgcolor: 'error',
route: '/ui-components/menu',
},
{
displayName: 'Tooltips',
iconName: 'tooltip',
+ bgcolor: 'primary',
route: '/ui-components/tooltips',
},
{
@@ -43,11 +49,13 @@ export const navItems: NavItem[] = [
{
displayName: 'Login',
iconName: 'lock',
+ bgcolor: 'accent',
route: '/authentication/login',
},
{
displayName: 'Register',
iconName: 'user-plus',
+ bgcolor: 'warning',
route: '/authentication/register',
},
{
@@ -56,11 +64,13 @@ export const navItems: NavItem[] = [
{
displayName: 'Icons',
iconName: 'mood-smile',
+ bgcolor: 'success',
route: '/extra/icons',
},
{
displayName: 'Sample Page',
iconName: 'aperture',
+ bgcolor: 'error',
route: '/extra/sample-page',
},
];
diff --git a/package/src/app/layouts/full/sidebar/sidebar.component.html b/package/src/app/layouts/full/sidebar/sidebar.component.html
index 2c302ba..aa89fc5 100644
--- a/package/src/app/layouts/full/sidebar/sidebar.component.html
+++ b/package/src/app/layouts/full/sidebar/sidebar.component.html
@@ -1,19 +1,10 @@
-
\ No newline at end of file
diff --git a/package/src/app/layouts/full/sidebar/sidebar.component.ts b/package/src/app/layouts/full/sidebar/sidebar.component.ts
index 0dc2287..98d0d9c 100644
--- a/package/src/app/layouts/full/sidebar/sidebar.component.ts
+++ b/package/src/app/layouts/full/sidebar/sidebar.component.ts
@@ -1,15 +1,27 @@
-import { Component, OnInit } from '@angular/core';
-import { navItems } from './sidebar-data';
-import { NavService } from '../../../services/nav.service';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ ViewChild,
+} from '@angular/core';
+import { BrandingComponent } from './branding.component';
+import { NgIf } from '@angular/common';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
@Component({
selector: 'app-sidebar',
+ standalone: true,
+ imports: [BrandingComponent, NgIf, TablerIconsModule, MaterialModule],
templateUrl: './sidebar.component.html',
})
export class SidebarComponent implements OnInit {
- navItems = navItems;
-
- constructor(public navService: NavService) {}
+ constructor() {}
+ @Input() showToggle = true;
+ @Output() toggleMobileNav = new EventEmitter();
+ @Output() toggleCollapsed = new EventEmitter();
ngOnInit(): void {}
-}
+}
\ No newline at end of file
diff --git a/package/src/app/pages/authentication/authentication.module.ts b/package/src/app/pages/authentication/authentication.module.ts
deleted file mode 100644
index a0c933f..0000000
--- a/package/src/app/pages/authentication/authentication.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-// icons
-import { TablerIconsModule } from 'angular-tabler-icons';
-import * as TablerIcons from 'angular-tabler-icons/icons';
-
-import { AuthenticationRoutes } from './authentication.routing';
-
-import { AppSideLoginComponent } from './login/login.component';
-import { AppSideRegisterComponent } from './register/register.component';
-
-@NgModule({
- imports: [
- CommonModule,
- RouterModule.forChild(AuthenticationRoutes),
- MatIconModule,
- MatCardModule,
- MatInputModule,
- MatCheckboxModule,
- MatButtonModule,
- FormsModule,
- ReactiveFormsModule,
- TablerIconsModule.pick(TablerIcons),
- ],
- declarations: [
- AppSideLoginComponent,
- AppSideRegisterComponent,
- ],
-})
-export class AuthenticationModule {}
diff --git a/package/src/app/pages/authentication/authentication.routing.ts b/package/src/app/pages/authentication/authentication.routes.ts
similarity index 66%
rename from package/src/app/pages/authentication/authentication.routing.ts
rename to package/src/app/pages/authentication/authentication.routes.ts
index 00395d3..c3764e1 100644
--- a/package/src/app/pages/authentication/authentication.routing.ts
+++ b/package/src/app/pages/authentication/authentication.routes.ts
@@ -1,7 +1,7 @@
import { Routes } from '@angular/router';
-import { AppSideLoginComponent } from './login/login.component';
-import { AppSideRegisterComponent } from './register/register.component';
+import { AppSideLoginComponent } from './side-login/side-login.component';
+import { AppSideRegisterComponent } from './side-register/side-register.component';
export const AuthenticationRoutes: Routes = [
{
diff --git a/package/src/app/pages/authentication/login/login.component.html b/package/src/app/pages/authentication/login/login.component.html
deleted file mode 100644
index 91221a6..0000000
--- a/package/src/app/pages/authentication/login/login.component.html
+++ /dev/null
@@ -1,93 +0,0 @@
- | any;
- public trafficChart!: Partial | any;
- public salesChart!: Partial | any;
-
- displayedColumns: string[] = ['profile', 'hrate', 'exclasses', 'status'];
- dataSource = ELEMENT_DATA;
-
- months: month[] = [
- { value: 'mar', viewValue: 'March 2023' },
- { value: 'apr', viewValue: 'April 2023' },
- { value: 'june', viewValue: 'June 2023' },
- ];
-
- // recent transaction
- stats: stats[] = [
- {
- id: 1,
- time: '09.30 am',
- color: 'primary',
- subtext: 'Payment received from John Doe of $385.90',
- },
- {
- id: 2,
- time: '10.30 am',
- color: 'accent',
- title: 'New sale recorded',
- link: '#ML-3467',
- },
- {
- id: 3,
- time: '12.30 pm',
- color: 'success',
- subtext: 'Payment was made of $64.95 to Michael',
- },
- {
- id: 4,
- time: '12.30 pm',
- color: 'warning',
- title: 'New sale recorded',
- link: '#ML-3467',
- },
- {
- id: 5,
- time: '12.30 pm',
- color: 'error',
- title: 'New arrival recorded',
- link: '#ML-3467',
- },
- {
- id: 6,
- time: '12.30 pm',
- color: 'success',
- subtext: 'Payment Done',
- },
- ];
-
- // ecommerce card
- productcards: productcards[] = [
- {
- id: 1,
- imgSrc: '/assets/images/products/p1.jpg',
- title: 'Boat Headphone',
- price: '285',
- rprice: '375',
- },
- {
- id: 2,
- imgSrc: '/assets/images/products/p2.jpg',
- title: 'MacBook Air Pro',
- price: '285',
- rprice: '375',
- },
- {
- id: 3,
- imgSrc: '/assets/images/products/p3.jpg',
- title: 'Red Valvet Dress',
- price: '285',
- rprice: '375',
- },
- {
- id: 4,
- imgSrc: '/assets/images/products/p4.jpg',
- title: 'Cute Soft Teddybear',
- price: '285',
- rprice: '375',
- },
- ];
-
- constructor() {
- // sales overview chart
- this.profitExpanceChart = {
- series: [
- {
- name: 'Eanings this month',
- data: [9, 5, 3, 7, 5, 10, 3],
- color: '#0085db',
- },
- {
- name: 'Expense this month',
- data: [6, 3, 9, 5, 4, 6, 4],
- color: '#fb977d',
- },
- ],
-
- grid: {
- borderColor: 'rgba(0,0,0,0.1)',
- strokeDashArray: 3,
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '30%',
- borderRadius: 4,
- endingShape: "rounded",
- },
- },
- chart: {
- type: 'bar',
- height: 390,
- offsetY: 10,
- foreColor: '#adb0bb',
- fontFamily: 'inherit',
- toolbar: { show: false },
- },
- dataLabels: { enabled: false },
- markers: { size: 0 },
- legend: { show: false },
- xaxis: {
- type: 'category',
- categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisTicks: {
- show: false,
- },
- axisBorder: {
- show: false,
- },
- labels: {
- style: { cssClass: 'grey--text lighten-2--text fill-color' },
- },
- },
- stroke: {
- show: true,
- width: 5,
- colors: ['transparent'],
- },
- tooltip: { theme: 'light' },
-
- responsive: [
- {
- breakpoint: 600,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 3,
- },
- },
- },
- },
- ],
- };
-
- // yearly breakup chart
- this.trafficChart = {
- series: [5368, 3500, 4106],
- labels: ['5368', 'Refferal Traffic', 'Oragnic Traffic'],
- chart: {
- type: 'donut',
- fontFamily: "'Plus Jakarta Sans', sans-serif;",
- foreColor: '#adb0bb',
- toolbar: {
- show: false,
- },
- height: 160,
- },
- colors: ['#e7ecf0', '#fb977d', '#0085db'],
- plotOptions: {
- pie: {
- donut: {
- size: '80%',
- background: 'none',
- labels: {
- show: true,
- name: {
- show: true,
- fontSize: '12px',
- color: undefined,
- offsetY: 5,
- },
- value: {
- show: false,
- color: '#98aab4',
- },
- },
- },
- },
- },
- stroke: {
- show: false,
- },
- dataLabels: {
- enabled: false,
- },
- legend: {
- show: false,
- },
- responsive: [
- {
- breakpoint: 991,
- options: {
- chart: {
- width: 120,
- },
- },
- },
- ],
- tooltip: {
- enabled: false,
- },
- };
-
- // mohtly earnings chart
- this.salesChart = {
- series: [
- {
- name: '',
- color: '#8763da',
- data: [25, 66, 20, 40, 12, 58, 20],
- },
- ],
-
- chart: {
- type: 'area',
- fontFamily: "'Plus Jakarta Sans', sans-serif;",
- foreColor: '#adb0bb',
- toolbar: {
- show: false,
- },
- height: 60,
- sparkline: {
- enabled: true,
- },
- group: 'sparklines',
- },
- stroke: {
- curve: 'smooth',
- width: 2,
- },
- fill: {
- colors: ['#8763da'],
- type: 'solid',
- opacity: 0.05,
- },
- markers: {
- size: 0,
- },
- tooltip: {
- theme: 'dark',
- x: {
- show: false,
- },
- },
- };
- }
-}
diff --git a/package/src/app/pages/extra/extra.module.ts b/package/src/app/pages/extra/extra.module.ts
deleted file mode 100644
index 25c6c2d..0000000
--- a/package/src/app/pages/extra/extra.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../../material.module';
-
-// icons
-import { TablerIconsModule } from 'angular-tabler-icons';
-import * as TablerIcons from 'angular-tabler-icons/icons';
-
-import { ExtraRoutes } from './extra.routing';
-import { AppIconsComponent } from './icons/icons.component';
-import { AppSamplePageComponent } from './sample-page/sample-page.component';
-
-
-@NgModule({
- imports: [
- CommonModule,
- RouterModule.forChild(ExtraRoutes),
- MaterialModule,
- FormsModule,
- ReactiveFormsModule,
- TablerIconsModule.pick(TablerIcons),
- ],
- declarations: [
- AppIconsComponent,
- AppSamplePageComponent
- ],
-})
-export class ExtraModule {}
diff --git a/package/src/app/pages/extra/extra.routing.ts b/package/src/app/pages/extra/extra.routes.ts
similarity index 100%
rename from package/src/app/pages/extra/extra.routing.ts
rename to package/src/app/pages/extra/extra.routes.ts
diff --git a/package/src/app/pages/extra/icons/icons.component.html b/package/src/app/pages/extra/icons/icons.component.html
index a84d9f2..0b2449b 100644
--- a/package/src/app/pages/extra/icons/icons.component.html
+++ b/package/src/app/pages/extra/icons/icons.component.html
@@ -2,11 +2,11 @@
-
- Icons
- Tabler Icons
-
-
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/package/src/app/pages/extra/icons/icons.component.ts b/package/src/app/pages/extra/icons/icons.component.ts
index f7438ca..556a0d1 100644
--- a/package/src/app/pages/extra/icons/icons.component.ts
+++ b/package/src/app/pages/extra/icons/icons.component.ts
@@ -1,14 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
@Component({
selector: 'app-icons',
- templateUrl: './icons.component.html'
+ standalone: true,
+ imports: [MaterialModule],
+ templateUrl: './icons.component.html',
})
-export class AppIconsComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
+export class AppIconsComponent { }
diff --git a/package/src/app/pages/extra/sample-page/sample-page.component.html b/package/src/app/pages/extra/sample-page/sample-page.component.html
index 9cdfdf8..56e81b2 100644
--- a/package/src/app/pages/extra/sample-page/sample-page.component.html
+++ b/package/src/app/pages/extra/sample-page/sample-page.component.html
@@ -2,9 +2,8 @@
-
- Sample Page
- This is test page
-
-
-
\ No newline at end of file
+
+ Sample Page
+ This is test page
+
+
\ No newline at end of file
diff --git a/package/src/app/pages/extra/sample-page/sample-page.component.ts b/package/src/app/pages/extra/sample-page/sample-page.component.ts
index 32190ad..1dda275 100644
--- a/package/src/app/pages/extra/sample-page/sample-page.component.ts
+++ b/package/src/app/pages/extra/sample-page/sample-page.component.ts
@@ -1,14 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
@Component({
selector: 'app-sample-page',
- templateUrl: './sample-page.component.html'
+ standalone: true,
+ imports: [MaterialModule],
+ templateUrl: './sample-page.component.html',
})
-export class AppSamplePageComponent implements OnInit {
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
+export class AppSamplePageComponent { }
diff --git a/package/src/app/pages/pages.module.ts b/package/src/app/pages/pages.module.ts
deleted file mode 100644
index fb75c50..0000000
--- a/package/src/app/pages/pages.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { PagesRoutes } from './pages.routing.module';
-import { MaterialModule } from '../material.module';
-import { FormsModule } from '@angular/forms';
-import { NgApexchartsModule } from 'ng-apexcharts';
-// icons
-import { TablerIconsModule } from 'angular-tabler-icons';
-import * as TablerIcons from 'angular-tabler-icons/icons';
-
-@NgModule({
- imports: [
- CommonModule,
- MaterialModule,
- FormsModule,
- NgApexchartsModule,
- RouterModule.forChild(PagesRoutes),
- TablerIconsModule.pick(TablerIcons),
- ],
- exports: [TablerIconsModule],
-})
-export class PagesModule {}
diff --git a/package/src/app/pages/pages.routes.ts b/package/src/app/pages/pages.routes.ts
new file mode 100644
index 0000000..a624abb
--- /dev/null
+++ b/package/src/app/pages/pages.routes.ts
@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+import { StarterComponent } from './starter/starter.component';
+
+export const PagesRoutes: Routes = [
+ {
+ path: '',
+ component: StarterComponent,
+ data: {
+ title: 'Starter',
+ urls: [
+ { title: 'Dashboard', url: '/dashboard' },
+ { title: 'Starter' },
+ ],
+ },
+ },
+];
diff --git a/package/src/app/pages/pages.routing.module.ts b/package/src/app/pages/pages.routing.module.ts
deleted file mode 100644
index 699a217..0000000
--- a/package/src/app/pages/pages.routing.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Routes } from '@angular/router';
-import { AppDashboardComponent } from './dashboard/dashboard.component';
-
-export const PagesRoutes: Routes = [
- {
- path: '',
- component: AppDashboardComponent,
- data: {
- title: 'Starter Page',
- },
- },
-];
diff --git a/package/src/app/pages/starter/starter.component.html b/package/src/app/pages/starter/starter.component.html
new file mode 100644
index 0000000..6deae19
--- /dev/null
+++ b/package/src/app/pages/starter/starter.component.html
@@ -0,0 +1,20 @@
+
-
-
+
@@ -44,7 +40,8 @@
Avatar
-
+
![]()
Mathew
-
+
@@ -86,13 +86,11 @@
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)"
>
-
+@if(item.navCap) {
+
-
-
+ @for(child of item.children; track child) {
+
+
+ }
+
+}
\ No newline at end of file
diff --git a/package/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts b/package/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts
index ca21707..0fca685 100644
--- a/package/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts
+++ b/package/src/app/layouts/full/sidebar/nav-item/nav-item.component.ts
@@ -1,14 +1,52 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import {
+ Component,
+ HostBinding,
+ Input,
+ OnInit,
+ OnChanges,
+ Output,
+ EventEmitter,
+} from '@angular/core';
import { NavItem } from './nav-item';
import { Router } from '@angular/router';
import { NavService } from '../../../../services/nav.service';
+import {
+ animate,
+ state,
+ style,
+ transition,
+ trigger,
+} from '@angular/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
@Component({
selector: 'app-nav-item',
+ standalone: true,
+ imports: [TranslateModule, TablerIconsModule, MaterialModule, CommonModule],
templateUrl: './nav-item.component.html',
styleUrls: [],
+ animations: [
+ trigger('indicatorRotate', [
+ state('collapsed', style({ transform: 'rotate(0deg)' })),
+ state('expanded', style({ transform: 'rotate(180deg)' })),
+ transition(
+ 'expanded <=> collapsed',
+ animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
+ ),
+ ]),
+ ],
})
export class AppNavItemComponent implements OnChanges {
+ @Output() toggleMobileLink: any = new EventEmitter
-
diff --git a/package/src/app/pages/authentication/login/login.component.ts b/package/src/app/pages/authentication/login/login.component.ts
deleted file mode 100644
index ca7b047..0000000
--- a/package/src/app/pages/authentication/login/login.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-login',
- templateUrl: './login.component.html',
-})
-export class AppSideLoginComponent {
- constructor() {}
-}
diff --git a/package/src/app/pages/authentication/register/register.component.html b/package/src/app/pages/authentication/register/register.component.html
deleted file mode 100644
index 7b793e4..0000000
--- a/package/src/app/pages/authentication/register/register.component.html
+++ /dev/null
@@ -1,92 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- or sign in with
-
-
- New to Spike?
-
- Create an account
-
-
-
-
diff --git a/package/src/app/pages/authentication/side-login/side-login.component.html b/package/src/app/pages/authentication/side-login/side-login.component.html
new file mode 100644
index 0000000..e290196
--- /dev/null
+++ b/package/src/app/pages/authentication/side-login/side-login.component.html
@@ -0,0 +1,106 @@
+
+
\ No newline at end of file
diff --git a/package/src/app/pages/authentication/side-login/side-login.component.ts b/package/src/app/pages/authentication/side-login/side-login.component.ts
new file mode 100644
index 0000000..28173cf
--- /dev/null
+++ b/package/src/app/pages/authentication/side-login/side-login.component.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import {
+ FormGroup,
+ FormControl,
+ Validators,
+ FormsModule,
+ ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+ selector: 'app-side-login',
+ standalone: true,
+ imports: [
+ RouterModule,
+ MaterialModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MatButtonModule,
+ ],
+ templateUrl: './side-login.component.html',
+})
+export class AppSideLoginComponent {
+ constructor(private router: Router) { }
+
+ form = new FormGroup({
+ uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+ password: new FormControl('', [Validators.required]),
+ });
+
+ get f() {
+ return this.form.controls;
+ }
+
+ submit() {
+ // console.log(this.form.value);
+ this.router.navigate(['/']);
+ }
+}
diff --git a/package/src/app/pages/authentication/side-register/side-register.component.html b/package/src/app/pages/authentication/side-register/side-register.component.html
new file mode 100644
index 0000000..4eb12dd
--- /dev/null
+++ b/package/src/app/pages/authentication/side-register/side-register.component.html
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Welcome to Spike Admin +
+ Your Admin Dashboard + +
+
+
+
+
+
+
+
+
+ or sign in with
+
+
+ New to Spike?
+
+ Create an account
+
+
+
+
\ No newline at end of file
diff --git a/package/src/app/pages/authentication/register/register.component.ts b/package/src/app/pages/authentication/side-register/side-register.component.ts
similarity index 51%
rename from package/src/app/pages/authentication/register/register.component.ts
rename to package/src/app/pages/authentication/side-register/side-register.component.ts
index af98b08..d3dac1b 100644
--- a/package/src/app/pages/authentication/register/register.component.ts
+++ b/package/src/app/pages/authentication/side-register/side-register.component.ts
@@ -1,10 +1,19 @@
import { Component } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import {
+ FormGroup,
+ FormControl,
+ Validators,
+ FormsModule,
+ ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
@Component({
- selector: 'app-register',
- templateUrl: './register.component.html',
+ selector: 'app-side-register',
+ standalone: true,
+ imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
+ templateUrl: './side-register.component.html',
})
export class AppSideRegisterComponent {
constructor(private router: Router) {}
@@ -21,6 +30,6 @@ export class AppSideRegisterComponent {
submit() {
// console.log(this.form.value);
- this.router.navigate(['/dashboard']);
+ this.router.navigate(['/']);
}
}
diff --git a/package/src/app/pages/dashboard/dashboard.component.html b/package/src/app/pages/dashboard/dashboard.component.html
deleted file mode 100644
index e284ea0..0000000
--- a/package/src/app/pages/dashboard/dashboard.component.html
+++ /dev/null
@@ -1,360 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Profit & Expenses
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Traffic Distribution
-
-
-
-
-
-
-
-
-
-
- $36,358
-
-
-
-
- +9%
- last year
-
-
-
-
- Oragnic
-
-
- Refferal
-
-
-
-
-
- Product Sales
-
-
-
-
-
-
-
-
- $6,820
-
-
-
- +9%
- last year
-
-
-
- Upcoming Schedules
-
-
-
-
-
-
-
-
-
-
- {{ stat.time }}
-
-
-
-
-
-
-
-
-
- Top Paying Clients
-
-
-
-
-
-
-
-
- | - Profile - | -
-
-
-
-
- - {{ element.uname }} -- - Prof. {{ element.position }} - - |
- - Hour Rate - | -- ${{ element.hourRate }}/hour - | -- Extra classes - | -- + {{ element.classes }} - | -- Status - | -
- |
-
|---|
-
diff --git a/package/src/app/pages/dashboard/dashboard.component.ts b/package/src/app/pages/dashboard/dashboard.component.ts
deleted file mode 100644
index 19e5fc0..0000000
--- a/package/src/app/pages/dashboard/dashboard.component.ts
+++ /dev/null
@@ -1,418 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTableModule } from '@angular/material/table';
-import { TablerIconsModule } from 'angular-tabler-icons';
-import {
- ApexChart,
- ChartComponent,
- ApexDataLabels,
- ApexLegend,
- ApexStroke,
- ApexTooltip,
- ApexAxisChartSeries,
- ApexXAxis,
- ApexYAxis,
- ApexGrid,
- ApexPlotOptions,
- ApexFill,
- ApexMarkers,
- ApexResponsive,
- NgApexchartsModule,
-} from 'ng-apexcharts';
-
-interface month {
- value: string;
- viewValue: string;
-}
-
-export interface profitExpanceChart {
- series: ApexAxisChartSeries;
- chart: ApexChart;
- dataLabels: ApexDataLabels;
- plotOptions: ApexPlotOptions;
- yaxis: ApexYAxis;
- xaxis: ApexXAxis;
- fill: ApexFill;
- tooltip: ApexTooltip;
- stroke: ApexStroke;
- legend: ApexLegend;
- grid: ApexGrid;
- marker: ApexMarkers;
-}
-
-export interface trafficChart {
- series: ApexAxisChartSeries;
- chart: ApexChart;
- dataLabels: ApexDataLabels;
- plotOptions: ApexPlotOptions;
- tooltip: ApexTooltip;
- stroke: ApexStroke;
- legend: ApexLegend;
- responsive: ApexResponsive;
-}
-
-export interface salesChart {
- series: ApexAxisChartSeries;
- chart: ApexChart;
- dataLabels: ApexDataLabels;
- plotOptions: ApexPlotOptions;
- tooltip: ApexTooltip;
- stroke: ApexStroke;
- legend: ApexLegend;
- responsive: ApexResponsive;
-}
-
-interface stats {
- id: number;
- time: string;
- color: string;
- title?: string;
- subtext?: string;
- link?: string;
-}
-
-export interface productsData {
- id: number;
- imagePath: string;
- uname: string;
- position: string;
- hourRate: number;
- classes: number;
- priority: string;
-}
-
-// ecommerce card
-interface productcards {
- id: number;
- imgSrc: string;
- title: string;
- price: string;
- rprice: string;
-}
-
-const ELEMENT_DATA: productsData[] = [
- {
- id: 1,
- imagePath: 'assets/images/profile/user-1.jpg',
- uname: 'Mark J. Freeman',
- position: 'English',
- hourRate: 150,
- classes: 53,
- priority: 'Available',
- },
- {
- id: 2,
- imagePath: 'assets/images/profile/user-2.jpg',
- uname: 'Andrew McDownland',
- position: 'Project Manager',
- hourRate: 150,
- classes: 68,
- priority: 'In Class',
- },
- {
- id: 3,
- imagePath: 'assets/images/profile/user-3.jpg',
- uname: 'Christopher Jamil',
- position: 'Project Manager',
- hourRate: 150,
- classes: 94,
- priority: 'Absent',
- },
- {
- id: 4,
- imagePath: 'assets/images/profile/user-4.jpg',
- uname: 'Nirav Joshi',
- position: 'Frontend Engineer',
- hourRate: 150,
- classes: 27,
- priority: 'On Leave',
- },
-];
-
-@Component({
- selector: 'app-dashboard',
- templateUrl: './dashboard.component.html',
- encapsulation: ViewEncapsulation.None,
- standalone: true,
- imports: [
- MatButtonModule,
- MatMenuModule,
- MatIconModule,
- TablerIconsModule,
- MatCardModule,
- NgApexchartsModule,
- MatTableModule,
- CommonModule,
- ],
-})
-export class AppDashboardComponent {
- @ViewChild('chart') chart: ChartComponent = Object.create(null);
-
- public profitExpanceChart!: Partial
-
-
-
-
-
-
- {{
- productcard.title
- }}
-
-
-
-
-
-
-
- ${{ productcard.price }}
- ${{ productcard.rprice }} -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Text with a badge -
+Text with a badge
- Text with large - badge -
+Text with small badge
+
Text with large badge
Button toggles badge visibility -
diff --git a/package/src/app/pages/ui-components/badge/badge.component.ts b/package/src/app/pages/ui-components/badge/badge.component.ts index af5ab79..e1780b9 100644 --- a/package/src/app/pages/ui-components/badge/badge.component.ts +++ b/package/src/app/pages/ui-components/badge/badge.component.ts @@ -1,20 +1,23 @@ import { Component, OnInit } from '@angular/core'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatCardModule } from '@angular/material/card'; @Component({ selector: 'app-badge', - templateUrl: './badge.component.html' + templateUrl: './badge.component.html', + standalone: true, + imports: [MatBadgeModule, MatButtonModule, MatIconModule, MatCardModule], }) export class AppBadgeComponent implements OnInit { + constructor() {} - constructor() { } - - ngOnInit(): void { - } + ngOnInit(): void {} hidden = false; toggleBadgeVisibility() { this.hidden = !this.hidden; } - } diff --git a/package/src/app/pages/ui-components/chips/chips.component.html b/package/src/app/pages/ui-components/chips/chips.component.html index 2ed8279..e60125b 100644 --- a/package/src/app/pages/ui-components/chips/chips.component.html +++ b/package/src/app/pages/ui-components/chips/chips.component.html @@ -40,7 +40,7 @@
+
+
+
+
+
+
+ Form Control
+
+
+
+ Video keywords
+
+ @for (keyword of keywords(); track keyword) {
+
+ {{ keyword }}
+
+
+ }
+
+
+
+
+
+
+
diff --git a/package/src/app/pages/ui-components/chips/chips.component.ts b/package/src/app/pages/ui-components/chips/chips.component.ts
index 3d40876..742fffb 100644
--- a/package/src/app/pages/ui-components/chips/chips.component.ts
+++ b/package/src/app/pages/ui-components/chips/chips.component.ts
@@ -1,8 +1,28 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component } from '@angular/core';
-import { MatChipEditedEvent, MatChipInputEvent } from '@angular/material/chips';
-import {ThemePalette} from '@angular/material/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ThemePalette } from '@angular/material/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ signal,
+} from '@angular/core';
+import {
+ CdkDrag,
+ CdkDragDrop,
+ CdkDropList,
+ moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import { MatCardModule } from '@angular/material/card';
+import {
+ MatChipEditedEvent,
+ MatChipInputEvent,
+ MatChipsModule,
+} from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatButtonModule } from '@angular/material/button';
export interface ChipColor {
name: string;
@@ -19,39 +39,52 @@ export interface Vegetable {
@Component({
selector: 'app-chips',
+ standalone: true,
templateUrl: './chips.component.html',
styleUrls: ['./chips.component.scss'],
+ imports: [
+ MatFormFieldModule,
+ MatChipsModule,
+ MatIconModule,
+ MatCardModule,
+ CdkDropList,
+ CdkDrag,
+ FormsModule,
+ ReactiveFormsModule,
+ MatButtonModule
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppChipsComponent {
// drag n drop
- vegetables: Vegetable[] = [
+ readonly vegetables = signal
+
+
+
+ + The following keywords are entered: + {{ formControl.value }} +
+
@@ -135,9 +137,11 @@
@@ -163,18 +167,31 @@
Folders
- {{ folder.name }}
- {{ folder.updated | date }}
+
+ {{ folder.name }}
+
+
+ {{ folder.updated | date }}
+
Notes
- {{ note.name }}
- {{ note.updated | date }}
+
+ {{ note.name }}
+
+
+ {{ note.updated | date }}
+
-
-
-
-
@@ -161,7 +161,7 @@