WIP
This commit is contained in:
Marek Lesko
@@ -1 +1 @@
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'Angular15'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('Angular15');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('Angular15 app is running!');
|
||||
});
|
||||
});
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'Angular15'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('Angular15');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('Angular15 app is running!');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { OAuthService } from 'angular-oauth2-oidc';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
providers: [
|
||||
OAuthService,
|
||||
],
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Modernize Angular Admin Tempplate';
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { OAuthService } from 'angular-oauth2-oidc';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
providers: [
|
||||
OAuthService,
|
||||
],
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Digitálny asistent PAS';
|
||||
}
|
||||
|
||||
@@ -1,92 +1,92 @@
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideZoneChangeDetection,
|
||||
importProvidersFrom,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
HttpClient,
|
||||
provideHttpClient,
|
||||
withInterceptorsFromDi,
|
||||
} from '@angular/common/http';
|
||||
import { routes } from './app.routes';
|
||||
import {
|
||||
provideRouter,
|
||||
withComponentInputBinding,
|
||||
withInMemoryScrolling,
|
||||
} from '@angular/router';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { provideClientHydration } from '@angular/platform-browser';
|
||||
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
||||
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { provideToastr } from 'ngx-toastr';
|
||||
|
||||
// icons
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import * as TablerIcons from 'angular-tabler-icons/icons';
|
||||
|
||||
// perfect scrollbar
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { NgxPermissionsModule } from 'ngx-permissions';
|
||||
//Import all material modules
|
||||
import { MaterialModule } from './material.module';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CalendarModule, DateAdapter } from 'angular-calendar';
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
|
||||
// code view
|
||||
import { provideHighlightOptions } from 'ngx-highlightjs';
|
||||
import 'highlight.js/styles/atom-one-dark.min.css';
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient): any {
|
||||
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
|
||||
}
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideAnimationsAsync(), // required animations providers
|
||||
provideToastr(), // Toastr providers
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideHighlightOptions({
|
||||
coreLibraryLoader: () => import('highlight.js/lib/core'),
|
||||
lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
|
||||
languages: {
|
||||
typescript: () => import('highlight.js/lib/languages/typescript'),
|
||||
css: () => import('highlight.js/lib/languages/css'),
|
||||
xml: () => import('highlight.js/lib/languages/xml'),
|
||||
},
|
||||
}),
|
||||
provideRouter(
|
||||
routes,
|
||||
withInMemoryScrolling({
|
||||
scrollPositionRestoration: 'enabled',
|
||||
anchorScrolling: 'enabled',
|
||||
}),
|
||||
withComponentInputBinding()
|
||||
),
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
provideClientHydration(),
|
||||
provideAnimationsAsync(),
|
||||
importProvidersFrom(
|
||||
FormsModule,
|
||||
ToastrModule.forRoot(),
|
||||
ReactiveFormsModule,
|
||||
MaterialModule,
|
||||
NgxPermissionsModule.forRoot(),
|
||||
TablerIconsModule.pick(TablerIcons),
|
||||
NgScrollbarModule,
|
||||
CalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory,
|
||||
}),
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
useFactory: HttpLoaderFactory,
|
||||
deps: [HttpClient],
|
||||
},
|
||||
})
|
||||
),
|
||||
],
|
||||
};
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideZoneChangeDetection,
|
||||
importProvidersFrom,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
HttpClient,
|
||||
provideHttpClient,
|
||||
withInterceptorsFromDi,
|
||||
} from '@angular/common/http';
|
||||
import { routes } from './app.routes';
|
||||
import {
|
||||
provideRouter,
|
||||
withComponentInputBinding,
|
||||
withInMemoryScrolling,
|
||||
} from '@angular/router';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { provideClientHydration } from '@angular/platform-browser';
|
||||
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
||||
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { provideToastr } from 'ngx-toastr';
|
||||
|
||||
// icons
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import * as TablerIcons from 'angular-tabler-icons/icons';
|
||||
|
||||
// perfect scrollbar
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { NgxPermissionsModule } from 'ngx-permissions';
|
||||
//Import all material modules
|
||||
import { MaterialModule } from './material.module';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CalendarModule, DateAdapter } from 'angular-calendar';
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
|
||||
// code view
|
||||
import { provideHighlightOptions } from 'ngx-highlightjs';
|
||||
import 'highlight.js/styles/atom-one-dark.min.css';
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient): any {
|
||||
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
|
||||
}
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideAnimationsAsync(), // required animations providers
|
||||
provideToastr(), // Toastr providers
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideHighlightOptions({
|
||||
coreLibraryLoader: () => import('highlight.js/lib/core'),
|
||||
lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
|
||||
languages: {
|
||||
typescript: () => import('highlight.js/lib/languages/typescript'),
|
||||
css: () => import('highlight.js/lib/languages/css'),
|
||||
xml: () => import('highlight.js/lib/languages/xml'),
|
||||
},
|
||||
}),
|
||||
provideRouter(
|
||||
routes,
|
||||
withInMemoryScrolling({
|
||||
scrollPositionRestoration: 'enabled',
|
||||
anchorScrolling: 'enabled',
|
||||
}),
|
||||
withComponentInputBinding()
|
||||
),
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
provideClientHydration(),
|
||||
provideAnimationsAsync(),
|
||||
importProvidersFrom(
|
||||
FormsModule,
|
||||
ToastrModule.forRoot(),
|
||||
ReactiveFormsModule,
|
||||
MaterialModule,
|
||||
NgxPermissionsModule.forRoot(),
|
||||
TablerIconsModule.pick(TablerIcons),
|
||||
NgScrollbarModule,
|
||||
CalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory,
|
||||
}),
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
useFactory: HttpLoaderFactory,
|
||||
deps: [HttpClient],
|
||||
},
|
||||
})
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,106 +1,106 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { BlankComponent } from './layouts/blank/blank.component';
|
||||
import { FullComponent } from './layouts/full/full.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: FullComponent,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/front-pages/homepage',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
// {
|
||||
// path: 'starter',
|
||||
// loadChildren: () =>
|
||||
// import('./pages/pages.routes').then((m) => m.PagesRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'dashboards',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/dashboards/dashboards.routes').then(
|
||||
// (m) => m.DashboardsRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'forms',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/forms/forms.routes').then((m) => m.FormsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'charts',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/charts/charts.routes').then((m) => m.ChartsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'apps',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/apps/apps.routes').then((m) => m.AppsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'widgets',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/widgets/widgets.routes').then((m) => m.WidgetsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'tables',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/tables/tables.routes').then((m) => m.TablesRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'datatable',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/datatable/datatable.routes').then(
|
||||
// (m) => m.DatatablesRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'theme-pages',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/theme-pages/theme-pages.routes').then(
|
||||
// (m) => m.ThemePagesRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'ui-components',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/ui-components/ui-components.routes').then(
|
||||
// (m) => m.UiComponentsRoutes
|
||||
// ),
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: BlankComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'authentication',
|
||||
loadChildren: () =>
|
||||
import('./pages/authentication/authentication.routes').then(
|
||||
(m) => m.AuthenticationRoutes
|
||||
),
|
||||
},
|
||||
// {
|
||||
// path: 'landingpage',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/theme-pages/landingpage/landingpage.routes').then(
|
||||
// (m) => m.LandingPageRoutes
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
path: 'front-pages',
|
||||
loadChildren: () =>
|
||||
import('./pages/front-pages/front-pages.routes').then(
|
||||
(m) => m.FrontPagesRoutes
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'authentication/error',
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
import { BlankComponent } from './layouts/blank/blank.component';
|
||||
import { FullComponent } from './layouts/full/full.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: FullComponent,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/front-pages/homepage',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
// {
|
||||
// path: 'starter',
|
||||
// loadChildren: () =>
|
||||
// import('./pages/pages.routes').then((m) => m.PagesRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'dashboards',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/dashboards/dashboards.routes').then(
|
||||
// (m) => m.DashboardsRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'forms',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/forms/forms.routes').then((m) => m.FormsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'charts',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/charts/charts.routes').then((m) => m.ChartsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'apps',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/apps/apps.routes').then((m) => m.AppsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'widgets',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/widgets/widgets.routes').then((m) => m.WidgetsRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'tables',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/tables/tables.routes').then((m) => m.TablesRoutes),
|
||||
// },
|
||||
// {
|
||||
// path: 'datatable',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/datatable/datatable.routes').then(
|
||||
// (m) => m.DatatablesRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'theme-pages',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/theme-pages/theme-pages.routes').then(
|
||||
// (m) => m.ThemePagesRoutes
|
||||
// ),
|
||||
// },
|
||||
// {
|
||||
// path: 'ui-components',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/ui-components/ui-components.routes').then(
|
||||
// (m) => m.UiComponentsRoutes
|
||||
// ),
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: BlankComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'authentication',
|
||||
loadChildren: () =>
|
||||
import('./pages/authentication/authentication.routes').then(
|
||||
(m) => m.AuthenticationRoutes
|
||||
),
|
||||
},
|
||||
// {
|
||||
// path: 'landingpage',
|
||||
// loadChildren: () =>
|
||||
// import('../../../theme/packages/main/src/app/pages/theme-pages/landingpage/landingpage.routes').then(
|
||||
// (m) => m.LandingPageRoutes
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
path: 'front-pages',
|
||||
loadChildren: () =>
|
||||
import('./pages/front-pages/front-pages.routes').then(
|
||||
(m) => m.FrontPagesRoutes
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'authentication/error',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
export interface AppSettings {
|
||||
dir: 'ltr' | 'rtl';
|
||||
theme: string;
|
||||
sidenavOpened: boolean;
|
||||
sidenavCollapsed: boolean;
|
||||
boxed: boolean;
|
||||
horizontal: boolean;
|
||||
activeTheme: string;
|
||||
language: string;
|
||||
cardBorder: boolean;
|
||||
navPos: 'side' | 'top';
|
||||
}
|
||||
|
||||
export const defaults: AppSettings = {
|
||||
dir: 'ltr',
|
||||
theme: 'light',
|
||||
sidenavOpened: false,
|
||||
sidenavCollapsed: false,
|
||||
boxed: true,
|
||||
horizontal: false,
|
||||
cardBorder: true,
|
||||
activeTheme: 'blue_theme',
|
||||
language: 'en-us',
|
||||
navPos: 'side',
|
||||
};
|
||||
export interface AppSettings {
|
||||
dir: 'ltr' | 'rtl';
|
||||
theme: string;
|
||||
sidenavOpened: boolean;
|
||||
sidenavCollapsed: boolean;
|
||||
boxed: boolean;
|
||||
horizontal: boolean;
|
||||
activeTheme: string;
|
||||
language: string;
|
||||
cardBorder: boolean;
|
||||
navPos: 'side' | 'top';
|
||||
}
|
||||
|
||||
export const defaults: AppSettings = {
|
||||
dir: 'ltr',
|
||||
theme: 'light',
|
||||
sidenavOpened: false,
|
||||
sidenavCollapsed: false,
|
||||
boxed: true,
|
||||
horizontal: false,
|
||||
cardBorder: true,
|
||||
activeTheme: 'blue_theme',
|
||||
language: 'en-us',
|
||||
navPos: 'side',
|
||||
};
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import * as TablerIcons from 'angular-tabler-icons/icons';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
TablerIconsModule.pick(TablerIcons),
|
||||
CommonModule
|
||||
],
|
||||
exports: [TablerIconsModule]
|
||||
})
|
||||
export class IconModule { }
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import * as TablerIcons from 'angular-tabler-icons/icons';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
TablerIconsModule.pick(TablerIcons),
|
||||
CommonModule
|
||||
],
|
||||
exports: [TablerIconsModule]
|
||||
})
|
||||
export class IconModule { }
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<!-- ============================================================== -->
|
||||
<!-- Only router without any element -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-sidenav-container
|
||||
[ngClass]="{
|
||||
cardBorder: options.cardBorder,
|
||||
}"
|
||||
[dir]="options.dir!"
|
||||
>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Only router without any element -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-sidenav-container
|
||||
[ngClass]="{
|
||||
cardBorder: options.cardBorder,
|
||||
}"
|
||||
[dir]="options.dir!"
|
||||
>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../services/core.service';
|
||||
import { AppSettings } from '../../config';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blank',
|
||||
templateUrl: './blank.component.html',
|
||||
styleUrls: [],
|
||||
imports: [RouterOutlet, MaterialModule, CommonModule],
|
||||
})
|
||||
export class BlankComponent {
|
||||
private htmlElement!: HTMLHtmlElement;
|
||||
|
||||
options!: AppSettings;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.htmlElement = document.querySelector('html')!;
|
||||
this.options = this.settings.getOptions();
|
||||
// Initialize project theme with options
|
||||
this.receiveOptions(this.options);
|
||||
}
|
||||
|
||||
receiveOptions(options: AppSettings): void {
|
||||
this.toggleDarkTheme(options);
|
||||
this.toggleColorsTheme(options);
|
||||
}
|
||||
|
||||
toggleDarkTheme(options: AppSettings) {
|
||||
if (options.theme === 'dark') {
|
||||
this.htmlElement.classList.add('dark-theme');
|
||||
this.htmlElement.classList.remove('light-theme');
|
||||
} else {
|
||||
this.htmlElement.classList.remove('dark-theme');
|
||||
this.htmlElement.classList.add('light-theme');
|
||||
}
|
||||
}
|
||||
|
||||
toggleColorsTheme(options: AppSettings) {
|
||||
// Remove any existing theme class dynamically
|
||||
this.htmlElement.classList.forEach((className) => {
|
||||
if (className.endsWith('_theme')) {
|
||||
this.htmlElement.classList.remove(className);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the selected theme class
|
||||
this.htmlElement.classList.add(options.activeTheme);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../services/core.service';
|
||||
import { AppSettings } from '../../config';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blank',
|
||||
templateUrl: './blank.component.html',
|
||||
styleUrls: [],
|
||||
imports: [RouterOutlet, MaterialModule, CommonModule],
|
||||
})
|
||||
export class BlankComponent {
|
||||
private htmlElement!: HTMLHtmlElement;
|
||||
|
||||
options!: AppSettings;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.htmlElement = document.querySelector('html')!;
|
||||
this.options = this.settings.getOptions();
|
||||
// Initialize project theme with options
|
||||
this.receiveOptions(this.options);
|
||||
}
|
||||
|
||||
receiveOptions(options: AppSettings): void {
|
||||
this.toggleDarkTheme(options);
|
||||
this.toggleColorsTheme(options);
|
||||
}
|
||||
|
||||
toggleDarkTheme(options: AppSettings) {
|
||||
if (options.theme === 'dark') {
|
||||
this.htmlElement.classList.add('dark-theme');
|
||||
this.htmlElement.classList.remove('light-theme');
|
||||
} else {
|
||||
this.htmlElement.classList.remove('dark-theme');
|
||||
this.htmlElement.classList.add('light-theme');
|
||||
}
|
||||
}
|
||||
|
||||
toggleColorsTheme(options: AppSettings) {
|
||||
// Remove any existing theme class dynamically
|
||||
this.htmlElement.classList.forEach((className) => {
|
||||
if (className.endsWith('_theme')) {
|
||||
this.htmlElement.classList.remove(className);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the selected theme class
|
||||
this.htmlElement.classList.add(options.activeTheme);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,197 +1,197 @@
|
||||
<span [dir]="options.dir!">
|
||||
<mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
|
||||
'sidebarNav-mini':
|
||||
options.sidenavCollapsed && options.navPos !== 'top' && !resView,
|
||||
'sidebarNav-horizontal': options.horizontal,
|
||||
cardBorder: options.cardBorder
|
||||
}">
|
||||
<!-- ============================================================== -->
|
||||
<!-- Vertical Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
|
||||
options.navPos === 'side' &&
|
||||
options.sidenavOpened &&
|
||||
!isOver &&
|
||||
!resView
|
||||
" (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<div class="flex-layout">
|
||||
<app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
|
||||
</app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- horizontal Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (resView) {
|
||||
<mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
|
||||
(openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<app-sidebar> </app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()">
|
||||
</app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- Main Content -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-sidenav-content class="contentWrapper" #content>
|
||||
<!-- ============================================================== -->
|
||||
<!-- VerticalHeader -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
|
||||
(toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
|
||||
} @else {
|
||||
<!-- horizontal header -->
|
||||
<app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
|
||||
(optionsChange)="receiveOptions($event)"></app-horizontal-header>
|
||||
} @if(options.horizontal) {
|
||||
<app-horizontal-sidebar></app-horizontal-sidebar>
|
||||
}
|
||||
|
||||
<main class="pageWrapper" [ngClass]="{
|
||||
maxWidth: options.boxed
|
||||
}">
|
||||
<app-breadcrumb></app-breadcrumb>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Outlet -->
|
||||
<!-- ============================================================== -->
|
||||
<router-outlet></router-outlet>
|
||||
<div class="customizerBtn">
|
||||
<button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ------------------------------------------------------------------
|
||||
Mobile Apps Sidebar
|
||||
------------------------------------------------------------------ -->
|
||||
<div [class.open]="isFilterNavOpen" class="filter-sidebar">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="branding">
|
||||
@if(options.theme === 'light') {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
} @else {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel class="shadow-none">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.img) {
|
||||
<div class="col-12 text-hover-primary">
|
||||
<a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
|
||||
<button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a [routerLink]="['quicklink.link']"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<div class="p-x-16">
|
||||
<a [routerLink]="['/apps/calendar']"
|
||||
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Calendar</span>
|
||||
</a>
|
||||
<a [routerLink]="['/apps/chat']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Chat</span>
|
||||
</a>
|
||||
<a [routerLink]="['/apps/email/inbox']"
|
||||
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<mat-sidenav #customizerRight mode="over" position="end">
|
||||
<div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between">
|
||||
<h3 class="f-s-21 f-w-600">Settings</h3>
|
||||
<button class="d-lg-none" mat-button (click)="customizerRight.toggle()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
<span [dir]="options.dir!">
|
||||
<mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
|
||||
'sidebarNav-mini':
|
||||
options.sidenavCollapsed && options.navPos !== 'top' && !resView,
|
||||
'sidebarNav-horizontal': options.horizontal,
|
||||
cardBorder: options.cardBorder
|
||||
}">
|
||||
<!-- ============================================================== -->
|
||||
<!-- Vertical Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
|
||||
options.navPos === 'side' &&
|
||||
options.sidenavOpened &&
|
||||
!isOver &&
|
||||
!resView
|
||||
" (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<div class="flex-layout">
|
||||
<app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
|
||||
</app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- horizontal Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (resView) {
|
||||
<mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
|
||||
(openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<app-sidebar> </app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()">
|
||||
</app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- Main Content -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-sidenav-content class="contentWrapper" #content>
|
||||
<!-- ============================================================== -->
|
||||
<!-- VerticalHeader -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
|
||||
(toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
|
||||
} @else {
|
||||
<!-- horizontal header -->
|
||||
<app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
|
||||
(optionsChange)="receiveOptions($event)"></app-horizontal-header>
|
||||
} @if(options.horizontal) {
|
||||
<app-horizontal-sidebar></app-horizontal-sidebar>
|
||||
}
|
||||
|
||||
<main class="pageWrapper" [ngClass]="{
|
||||
maxWidth: options.boxed
|
||||
}">
|
||||
<app-breadcrumb></app-breadcrumb>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Outlet -->
|
||||
<!-- ============================================================== -->
|
||||
<router-outlet></router-outlet>
|
||||
<div class="customizerBtn">
|
||||
<button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ------------------------------------------------------------------
|
||||
Mobile Apps Sidebar
|
||||
------------------------------------------------------------------ -->
|
||||
<div [class.open]="isFilterNavOpen" class="filter-sidebar">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="branding">
|
||||
@if(options.theme === 'light') {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
} @else {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel class="shadow-none">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.img) {
|
||||
<div class="col-12 text-hover-primary">
|
||||
<a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
|
||||
<button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a [routerLink]="['quicklink.link']"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<div class="p-x-16">
|
||||
<a [routerLink]="['/apps/calendar']"
|
||||
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Calendar</span>
|
||||
</a>
|
||||
<a [routerLink]="['/apps/chat']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Chat</span>
|
||||
</a>
|
||||
<a [routerLink]="['/apps/email/inbox']"
|
||||
class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<mat-sidenav #customizerRight mode="over" position="end">
|
||||
<div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between">
|
||||
<h3 class="f-s-21 f-w-600">Settings</h3>
|
||||
<button class="d-lg-none" mat-button (click)="customizerRight.toggle()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
</span>
|
||||
@@ -1,285 +1,285 @@
|
||||
import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
|
||||
import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
|
||||
import { CoreService } from '../../services/core.service';
|
||||
import { AppSettings } from '../../config';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { navItems } from './vertical/sidebar/sidebar-data';
|
||||
import { NavService } from '../../services/nav.service';
|
||||
import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SidebarComponent } from './vertical/sidebar/sidebar.component';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { HeaderComponent } from './vertical/header/header.component';
|
||||
import { AppHorizontalHeaderComponent } from './horizontal/header/header.component';
|
||||
import { AppHorizontalSidebarComponent } from './horizontal/sidebar/sidebar.component';
|
||||
import { AppBreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
|
||||
import { CustomizerComponent } from './shared/customizer/customizer.component';
|
||||
|
||||
const MOBILE_VIEW = 'screen and (max-width: 768px)';
|
||||
const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
|
||||
const MONITOR_VIEW = 'screen and (min-width: 1024px)';
|
||||
const BELOWMONITOR = 'screen and (max-width: 1023px)';
|
||||
|
||||
// for mobile app sidebar
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-full',
|
||||
imports: [
|
||||
RouterModule,
|
||||
AppNavItemComponent,
|
||||
MaterialModule,
|
||||
CommonModule,
|
||||
SidebarComponent,
|
||||
NgScrollbarModule,
|
||||
TablerIconsModule,
|
||||
HeaderComponent,
|
||||
AppHorizontalHeaderComponent,
|
||||
AppHorizontalSidebarComponent,
|
||||
AppBreadcrumbComponent,
|
||||
CustomizerComponent,
|
||||
],
|
||||
templateUrl: './full.component.html',
|
||||
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FullComponent implements OnInit {
|
||||
navItems = navItems;
|
||||
|
||||
|
||||
|
||||
@ViewChild('leftsidenav')
|
||||
public sidenav: MatSidenav;
|
||||
resView = false;
|
||||
@ViewChild('content', { static: true }) content!: MatSidenavContent;
|
||||
//get options from service
|
||||
options: AppSettings;
|
||||
private layoutChangesSubscription = Subscription.EMPTY;
|
||||
private isMobileScreen = false;
|
||||
private isContentWidthFixed = true;
|
||||
private isCollapsedWidthFixed = false;
|
||||
private htmlElement!: HTMLHtmlElement;
|
||||
|
||||
get isOver(): boolean {
|
||||
return this.isMobileScreen;
|
||||
}
|
||||
|
||||
get isTablet(): boolean {
|
||||
return this.resView;
|
||||
}
|
||||
|
||||
// for mobile app sidebar
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'Todo App',
|
||||
subtitle: 'Completed task',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Courses',
|
||||
subtitle: 'Create new course',
|
||||
link: '/apps/courses',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private mediaMatcher: MediaMatcher,
|
||||
private router: Router,
|
||||
private breakpointObserver: BreakpointObserver,
|
||||
private navService: NavService, private cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.htmlElement = document.querySelector('html')!;
|
||||
this.options = this.settings.getOptions();
|
||||
this.layoutChangesSubscription = this.breakpointObserver
|
||||
.observe([MOBILE_VIEW, TABLET_VIEW, MONITOR_VIEW, BELOWMONITOR])
|
||||
.subscribe((state) => {
|
||||
// SidenavOpened must be reset true when layout changes
|
||||
this.options.sidenavOpened = true;
|
||||
this.isMobileScreen = state.breakpoints[BELOWMONITOR];
|
||||
if (this.options.sidenavCollapsed == false) {
|
||||
this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
|
||||
}
|
||||
this.isContentWidthFixed = state.breakpoints[MONITOR_VIEW];
|
||||
this.resView = state.breakpoints[BELOWMONITOR];
|
||||
});
|
||||
|
||||
// Initialize project theme with options
|
||||
this.receiveOptions(this.options);
|
||||
|
||||
// This is for scroll to top
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
.subscribe((e) => {
|
||||
this.content.scrollTo({ top: 0 });
|
||||
});
|
||||
}
|
||||
|
||||
isFilterNavOpen = false;
|
||||
|
||||
toggleFilterNav() {
|
||||
this.isFilterNavOpen = !this.isFilterNavOpen;
|
||||
console.log('Sidebar open:', this.isFilterNavOpen);
|
||||
this.cdr.detectChanges(); // Ensures Angular updates the view
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutChangesSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
toggleCollapsed() {
|
||||
this.isContentWidthFixed = false;
|
||||
this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
|
||||
this.resetCollapsedState();
|
||||
}
|
||||
|
||||
resetCollapsedState(timer = 400) {
|
||||
setTimeout(() => this.settings.setOptions(this.options), timer);
|
||||
}
|
||||
|
||||
onSidenavClosedStart() {
|
||||
this.isContentWidthFixed = false;
|
||||
}
|
||||
|
||||
onSidenavOpenedChange(isOpened: boolean) {
|
||||
this.isCollapsedWidthFixed = !this.isOver;
|
||||
this.options.sidenavOpened = isOpened;
|
||||
this.settings.setOptions(this.options);
|
||||
}
|
||||
|
||||
receiveOptions(options: AppSettings): void {
|
||||
this.toggleDarkTheme(options);
|
||||
this.toggleColorsTheme(options);
|
||||
}
|
||||
|
||||
toggleDarkTheme(options: AppSettings) {
|
||||
if (options.theme === 'dark') {
|
||||
this.htmlElement.classList.add('dark-theme');
|
||||
this.htmlElement.classList.remove('light-theme');
|
||||
} else {
|
||||
this.htmlElement.classList.remove('dark-theme');
|
||||
this.htmlElement.classList.add('light-theme');
|
||||
}
|
||||
}
|
||||
|
||||
toggleColorsTheme(options: AppSettings) {
|
||||
// Remove any existing theme class dynamically
|
||||
this.htmlElement.classList.forEach((className) => {
|
||||
if (className.endsWith('_theme')) {
|
||||
this.htmlElement.classList.remove(className);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the selected theme class
|
||||
this.htmlElement.classList.add(options.activeTheme);
|
||||
}
|
||||
}
|
||||
import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
|
||||
import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
|
||||
import { CoreService } from '../../services/core.service';
|
||||
import { AppSettings } from '../../config';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { navItems } from './vertical/sidebar/sidebar-data';
|
||||
import { NavService } from '../../services/nav.service';
|
||||
import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SidebarComponent } from './vertical/sidebar/sidebar.component';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { HeaderComponent } from './vertical/header/header.component';
|
||||
import { AppHorizontalHeaderComponent } from './horizontal/header/header.component';
|
||||
import { AppHorizontalSidebarComponent } from './horizontal/sidebar/sidebar.component';
|
||||
import { AppBreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
|
||||
import { CustomizerComponent } from './shared/customizer/customizer.component';
|
||||
|
||||
const MOBILE_VIEW = 'screen and (max-width: 768px)';
|
||||
const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
|
||||
const MONITOR_VIEW = 'screen and (min-width: 1024px)';
|
||||
const BELOWMONITOR = 'screen and (max-width: 1023px)';
|
||||
|
||||
// for mobile app sidebar
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-full',
|
||||
imports: [
|
||||
RouterModule,
|
||||
AppNavItemComponent,
|
||||
MaterialModule,
|
||||
CommonModule,
|
||||
SidebarComponent,
|
||||
NgScrollbarModule,
|
||||
TablerIconsModule,
|
||||
HeaderComponent,
|
||||
AppHorizontalHeaderComponent,
|
||||
AppHorizontalSidebarComponent,
|
||||
AppBreadcrumbComponent,
|
||||
CustomizerComponent,
|
||||
],
|
||||
templateUrl: './full.component.html',
|
||||
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FullComponent implements OnInit {
|
||||
navItems = navItems;
|
||||
|
||||
|
||||
|
||||
@ViewChild('leftsidenav')
|
||||
public sidenav: MatSidenav;
|
||||
resView = false;
|
||||
@ViewChild('content', { static: true }) content!: MatSidenavContent;
|
||||
//get options from service
|
||||
options: AppSettings;
|
||||
private layoutChangesSubscription = Subscription.EMPTY;
|
||||
private isMobileScreen = false;
|
||||
private isContentWidthFixed = true;
|
||||
private isCollapsedWidthFixed = false;
|
||||
private htmlElement!: HTMLHtmlElement;
|
||||
|
||||
get isOver(): boolean {
|
||||
return this.isMobileScreen;
|
||||
}
|
||||
|
||||
get isTablet(): boolean {
|
||||
return this.resView;
|
||||
}
|
||||
|
||||
// for mobile app sidebar
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'Todo App',
|
||||
subtitle: 'Completed task',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Courses',
|
||||
subtitle: 'Create new course',
|
||||
link: '/apps/courses',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private mediaMatcher: MediaMatcher,
|
||||
private router: Router,
|
||||
private breakpointObserver: BreakpointObserver,
|
||||
private navService: NavService, private cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.htmlElement = document.querySelector('html')!;
|
||||
this.options = this.settings.getOptions();
|
||||
this.layoutChangesSubscription = this.breakpointObserver
|
||||
.observe([MOBILE_VIEW, TABLET_VIEW, MONITOR_VIEW, BELOWMONITOR])
|
||||
.subscribe((state) => {
|
||||
// SidenavOpened must be reset true when layout changes
|
||||
this.options.sidenavOpened = true;
|
||||
this.isMobileScreen = state.breakpoints[BELOWMONITOR];
|
||||
if (this.options.sidenavCollapsed == false) {
|
||||
this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
|
||||
}
|
||||
this.isContentWidthFixed = state.breakpoints[MONITOR_VIEW];
|
||||
this.resView = state.breakpoints[BELOWMONITOR];
|
||||
});
|
||||
|
||||
// Initialize project theme with options
|
||||
this.receiveOptions(this.options);
|
||||
|
||||
// This is for scroll to top
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
.subscribe((e) => {
|
||||
this.content.scrollTo({ top: 0 });
|
||||
});
|
||||
}
|
||||
|
||||
isFilterNavOpen = false;
|
||||
|
||||
toggleFilterNav() {
|
||||
this.isFilterNavOpen = !this.isFilterNavOpen;
|
||||
console.log('Sidebar open:', this.isFilterNavOpen);
|
||||
this.cdr.detectChanges(); // Ensures Angular updates the view
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutChangesSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
toggleCollapsed() {
|
||||
this.isContentWidthFixed = false;
|
||||
this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
|
||||
this.resetCollapsedState();
|
||||
}
|
||||
|
||||
resetCollapsedState(timer = 400) {
|
||||
setTimeout(() => this.settings.setOptions(this.options), timer);
|
||||
}
|
||||
|
||||
onSidenavClosedStart() {
|
||||
this.isContentWidthFixed = false;
|
||||
}
|
||||
|
||||
onSidenavOpenedChange(isOpened: boolean) {
|
||||
this.isCollapsedWidthFixed = !this.isOver;
|
||||
this.options.sidenavOpened = isOpened;
|
||||
this.settings.setOptions(this.options);
|
||||
}
|
||||
|
||||
receiveOptions(options: AppSettings): void {
|
||||
this.toggleDarkTheme(options);
|
||||
this.toggleColorsTheme(options);
|
||||
}
|
||||
|
||||
toggleDarkTheme(options: AppSettings) {
|
||||
if (options.theme === 'dark') {
|
||||
this.htmlElement.classList.add('dark-theme');
|
||||
this.htmlElement.classList.remove('light-theme');
|
||||
} else {
|
||||
this.htmlElement.classList.remove('dark-theme');
|
||||
this.htmlElement.classList.add('light-theme');
|
||||
}
|
||||
}
|
||||
|
||||
toggleColorsTheme(options: AppSettings) {
|
||||
// Remove any existing theme class dynamically
|
||||
this.htmlElement.classList.forEach((className) => {
|
||||
if (className.endsWith('_theme')) {
|
||||
this.htmlElement.classList.remove(className);
|
||||
}
|
||||
});
|
||||
|
||||
// Add the selected theme class
|
||||
this.htmlElement.classList.add(options.activeTheme);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,296 +1,296 @@
|
||||
<mat-toolbar class="topbar horizontal-topbar">
|
||||
<div class="container">
|
||||
<div class="d-none d-sm-flex branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-block d-lg-none"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button mat-icon-button (click)="openDialog()" class="d-flex">
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="text-body f-s-12">{{
|
||||
appdd.subtitle
|
||||
}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler
|
||||
>Frequently Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
|
||||
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="m-x-5 notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu
|
||||
#notificationmenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu
|
||||
#profilemenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light-primary shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar class="topbar horizontal-topbar">
|
||||
<div class="container">
|
||||
<div class="d-none d-sm-flex branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-block d-lg-none"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button mat-icon-button (click)="openDialog()" class="d-flex">
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="text-body f-s-12">{{
|
||||
appdd.subtitle
|
||||
}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler
|
||||
>Frequently Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
|
||||
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="m-x-5 notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu
|
||||
#notificationmenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu
|
||||
#profilemenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light-primary shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
@@ -1,292 +1,292 @@
|
||||
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { navItems } from '../../vertical/sidebar/sidebar-data';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { BrandingComponent } from '../../vertical/sidebar/branding.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { AppSettings } from '../../../../config';
|
||||
|
||||
interface notifications {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
interface profiledd {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-header',
|
||||
imports: [RouterModule, TablerIconsModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './header.component.html'
|
||||
})
|
||||
export class AppHorizontalHeaderComponent {
|
||||
@Input() showToggle = true;
|
||||
@Input() toggleChecked = false;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleMobileFilterNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
showFiller = false;
|
||||
|
||||
public selectedLanguage: any = {
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
};
|
||||
|
||||
public languages: any[] = [
|
||||
{
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
},
|
||||
{
|
||||
language: 'Español',
|
||||
code: 'es',
|
||||
icon: '/assets/images/flag/icon-flag-es.svg',
|
||||
},
|
||||
{
|
||||
language: 'Français',
|
||||
code: 'fr',
|
||||
icon: '/assets/images/flag/icon-flag-fr.svg',
|
||||
},
|
||||
{
|
||||
language: 'German',
|
||||
code: 'de',
|
||||
icon: '/assets/images/flag/icon-flag-de.svg',
|
||||
},
|
||||
];
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private vsidenav: CoreService,
|
||||
public dialog: MatDialog,
|
||||
private translate: TranslateService
|
||||
) {
|
||||
translate.setDefaultLang('en');
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
options: AppSettings;
|
||||
|
||||
openDialog() {
|
||||
const dialogRef = this.dialog.open(AppHorizontalSearchDialogComponent);
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
console.log(`Dialog result: ${result}`);
|
||||
});
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
|
||||
setlightDark(theme: string) {
|
||||
this.options.theme = theme;
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
changeLanguage(lang: any): void {
|
||||
this.translate.use(lang.code);
|
||||
this.selectedLanguage = lang;
|
||||
}
|
||||
|
||||
notifications: notifications[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/profile/user-1.jpg',
|
||||
title: 'Roman Joined thes Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/profile/user-2.jpg',
|
||||
title: 'New message received',
|
||||
subtitle: 'Salma sent you new message',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/profile/user-3.jpg',
|
||||
title: 'New Payment received',
|
||||
subtitle: 'Check your earnings',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/profile/user-4.jpg',
|
||||
title: 'Jolly completed tasks',
|
||||
subtitle: 'Assign her new tasks',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/profile/user-5.jpg',
|
||||
title: 'Roman Joined the Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
];
|
||||
|
||||
profiledd: profiledd[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-account.svg',
|
||||
title: 'My Profile',
|
||||
subtitle: 'Account Settings',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-inbox.svg',
|
||||
title: 'My Inbox',
|
||||
subtitle: 'Messages & Email',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-tasks.svg',
|
||||
title: 'My Tasks',
|
||||
subtitle: 'To-do and Daily Tasks',
|
||||
link: '/apps/taskboard',
|
||||
},
|
||||
];
|
||||
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'eCommerce App',
|
||||
subtitle: 'Buy a Product',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Courses',
|
||||
subtitle: 'Create new course',
|
||||
link: '/apps/courses',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-dialog',
|
||||
imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
|
||||
templateUrl: 'search-dialog.component.html'
|
||||
})
|
||||
export class AppHorizontalSearchDialogComponent {
|
||||
searchText: string = '';
|
||||
navItems = navItems;
|
||||
|
||||
navItemsData = navItems.filter((navitem) => navitem.displayName);
|
||||
}
|
||||
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { navItems } from '../../vertical/sidebar/sidebar-data';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { BrandingComponent } from '../../vertical/sidebar/branding.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { AppSettings } from '../../../../config';
|
||||
|
||||
interface notifications {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
interface profiledd {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-header',
|
||||
imports: [RouterModule, TablerIconsModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './header.component.html'
|
||||
})
|
||||
export class AppHorizontalHeaderComponent {
|
||||
@Input() showToggle = true;
|
||||
@Input() toggleChecked = false;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleMobileFilterNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
showFiller = false;
|
||||
|
||||
public selectedLanguage: any = {
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
};
|
||||
|
||||
public languages: any[] = [
|
||||
{
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
},
|
||||
{
|
||||
language: 'Español',
|
||||
code: 'es',
|
||||
icon: '/assets/images/flag/icon-flag-es.svg',
|
||||
},
|
||||
{
|
||||
language: 'Français',
|
||||
code: 'fr',
|
||||
icon: '/assets/images/flag/icon-flag-fr.svg',
|
||||
},
|
||||
{
|
||||
language: 'German',
|
||||
code: 'de',
|
||||
icon: '/assets/images/flag/icon-flag-de.svg',
|
||||
},
|
||||
];
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private vsidenav: CoreService,
|
||||
public dialog: MatDialog,
|
||||
private translate: TranslateService
|
||||
) {
|
||||
translate.setDefaultLang('en');
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
options: AppSettings;
|
||||
|
||||
openDialog() {
|
||||
const dialogRef = this.dialog.open(AppHorizontalSearchDialogComponent);
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
console.log(`Dialog result: ${result}`);
|
||||
});
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
|
||||
setlightDark(theme: string) {
|
||||
this.options.theme = theme;
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
changeLanguage(lang: any): void {
|
||||
this.translate.use(lang.code);
|
||||
this.selectedLanguage = lang;
|
||||
}
|
||||
|
||||
notifications: notifications[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/profile/user-1.jpg',
|
||||
title: 'Roman Joined thes Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/profile/user-2.jpg',
|
||||
title: 'New message received',
|
||||
subtitle: 'Salma sent you new message',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/profile/user-3.jpg',
|
||||
title: 'New Payment received',
|
||||
subtitle: 'Check your earnings',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/profile/user-4.jpg',
|
||||
title: 'Jolly completed tasks',
|
||||
subtitle: 'Assign her new tasks',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/profile/user-5.jpg',
|
||||
title: 'Roman Joined the Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
];
|
||||
|
||||
profiledd: profiledd[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-account.svg',
|
||||
title: 'My Profile',
|
||||
subtitle: 'Account Settings',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-inbox.svg',
|
||||
title: 'My Inbox',
|
||||
subtitle: 'Messages & Email',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-tasks.svg',
|
||||
title: 'My Tasks',
|
||||
subtitle: 'To-do and Daily Tasks',
|
||||
link: '/apps/taskboard',
|
||||
},
|
||||
];
|
||||
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'eCommerce App',
|
||||
subtitle: 'Buy a Product',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Courses',
|
||||
subtitle: 'Create new course',
|
||||
link: '/apps/courses',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-dialog',
|
||||
imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
|
||||
templateUrl: 'search-dialog.component.html'
|
||||
})
|
||||
export class AppHorizontalSearchDialogComponent {
|
||||
searchText: string = '';
|
||||
navItems = navItems;
|
||||
|
||||
navItemsData = navItems.filter((navitem) => navitem.displayName);
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
<div class="p-24 p-b-0">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
color="primary"
|
||||
class="hide-hint w-100"
|
||||
>
|
||||
<input matInput placeholder="Search here" [(ngModel)]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2 d-flex justify-content-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
mat-dialog-close
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content class="mat-typography search-dialog">
|
||||
<h4 class="f-s-18 f-w-500 m-b-16">Quick Page Links</h4>
|
||||
|
||||
@for(item of navItemsData; track item.route) {
|
||||
<a
|
||||
[routerLink]="[item.route]"
|
||||
mat-dialog-close
|
||||
class="p-y-12 text-decoration-none d-block"
|
||||
>
|
||||
<h5 class="f-s-14 f-w-500 d-block m-0">
|
||||
{{ item.displayName }}
|
||||
</h5>
|
||||
<span class="f-s-12 f-s-16">{{ item.route }}</span>
|
||||
</a>
|
||||
}
|
||||
</mat-dialog-content>
|
||||
<div class="p-24 p-b-0">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
color="primary"
|
||||
class="hide-hint w-100"
|
||||
>
|
||||
<input matInput placeholder="Search here" [(ngModel)]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2 d-flex justify-content-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
mat-dialog-close
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content class="mat-typography search-dialog">
|
||||
<h4 class="f-s-18 f-w-500 m-b-16">Quick Page Links</h4>
|
||||
|
||||
@for(item of navItemsData; track item.route) {
|
||||
<a
|
||||
[routerLink]="[item.route]"
|
||||
mat-dialog-close
|
||||
class="p-y-12 text-decoration-none d-block"
|
||||
>
|
||||
<h5 class="f-s-14 f-w-500 d-block m-0">
|
||||
{{ item.displayName }}
|
||||
</h5>
|
||||
<span class="f-s-12 f-s-16">{{ item.route }}</span>
|
||||
</a>
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
@if(!item.navCap) {
|
||||
<a
|
||||
class="cursor-pointer menuLink"
|
||||
(click)="onItemSelected(item)"
|
||||
[ngClass]="{
|
||||
activeMenu: item.route ? router.isActive(item.route, true) : false
|
||||
}"
|
||||
>
|
||||
<i-tabler class="routeIcon icon-18" name="{{ item.iconName }}"></i-tabler>
|
||||
{{ item.displayName }}
|
||||
@if(item.children && item.children.length) {
|
||||
<span class="down-icon d-flex m-l-auto">
|
||||
<mat-icon> expand_more </mat-icon>
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
} @if(item.children){
|
||||
<div class="childBox">
|
||||
@for(child of item.children; track child) {
|
||||
<app-horizontal-nav-item [item]="child" class="ddmenu">
|
||||
</app-horizontal-nav-item>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if(!item.navCap) {
|
||||
<a
|
||||
class="cursor-pointer menuLink"
|
||||
(click)="onItemSelected(item)"
|
||||
[ngClass]="{
|
||||
activeMenu: item.route ? router.isActive(item.route, true) : false
|
||||
}"
|
||||
>
|
||||
<i-tabler class="routeIcon icon-18" name="{{ item.iconName }}"></i-tabler>
|
||||
{{ item.displayName }}
|
||||
@if(item.children && item.children.length) {
|
||||
<span class="down-icon d-flex m-l-auto">
|
||||
<mat-icon> expand_more </mat-icon>
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
} @if(item.children){
|
||||
<div class="childBox">
|
||||
@for(child of item.children; track child) {
|
||||
<app-horizontal-nav-item [item]="child" class="ddmenu">
|
||||
</app-horizontal-nav-item>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavService } from '../../../../../services/nav.service';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-nav-item',
|
||||
imports: [TablerIconsModule, CommonModule, MatIconModule],
|
||||
templateUrl: './nav-item.component.html'
|
||||
})
|
||||
export class AppHorizontalNavItemComponent implements OnInit {
|
||||
@Input() depth: any;
|
||||
@Input() item: any;
|
||||
|
||||
constructor(public navService: NavService, public router: Router) {
|
||||
if (this.depth === undefined) {
|
||||
this.depth = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() { }
|
||||
onItemSelected(item: any) {
|
||||
if (!item.children || !item.children.length) {
|
||||
this.router.navigate([item.route]);
|
||||
}
|
||||
}
|
||||
}
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavService } from '../../../../../services/nav.service';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-nav-item',
|
||||
imports: [TablerIconsModule, CommonModule, MatIconModule],
|
||||
templateUrl: './nav-item.component.html'
|
||||
})
|
||||
export class AppHorizontalNavItemComponent implements OnInit {
|
||||
@Input() depth: any;
|
||||
@Input() item: any;
|
||||
|
||||
constructor(public navService: NavService, public router: Router) {
|
||||
if (this.depth === undefined) {
|
||||
this.depth = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() { }
|
||||
onItemSelected(item: any) {
|
||||
if (!item.children || !item.children.length) {
|
||||
this.router.navigate([item.route]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,16 +1,16 @@
|
||||
@if(mobileQuery.matches) {
|
||||
<div class="horizontal-sidebar p-y-8 p-y-8 b-b-1">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="horizontal-navbar hstack align-items-center">
|
||||
@for(item of navItems; track item) {
|
||||
<app-horizontal-nav-item [item]="item" class="parentBox {{ item.ddType }}" [ngClass]="{
|
||||
pactive: item.route == parentActive ? 'pactive' : ''
|
||||
}">
|
||||
</app-horizontal-nav-item>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(mobileQuery.matches) {
|
||||
<div class="horizontal-sidebar p-y-8 p-y-8 b-b-1">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="horizontal-navbar hstack align-items-center">
|
||||
@for(item of navItems; track item) {
|
||||
<app-horizontal-nav-item [item]="item" class="parentBox {{ item.ddType }}" [ngClass]="{
|
||||
pactive: item.route == parentActive ? 'pactive' : ''
|
||||
}">
|
||||
</app-horizontal-nav-item>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,48 +1,48 @@
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
ChangeDetectorRef,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
import { navItems } from './sidebar-data';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavService } from '../../../../services/nav.service';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { AppHorizontalNavItemComponent } from './nav-item/nav-item.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-sidebar',
|
||||
imports: [AppHorizontalNavItemComponent, CommonModule],
|
||||
templateUrl: './sidebar.component.html',
|
||||
})
|
||||
export class AppHorizontalSidebarComponent implements OnInit {
|
||||
navItems = navItems;
|
||||
parentActive = '';
|
||||
|
||||
mobileQuery: MediaQueryList;
|
||||
private _mobileQueryListener: () => void;
|
||||
|
||||
constructor(
|
||||
public navService: NavService,
|
||||
public router: Router,
|
||||
media: MediaMatcher,
|
||||
changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.mobileQuery = media.matchMedia('(min-width: 1100px)');
|
||||
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
|
||||
this.mobileQuery.addListener(this._mobileQueryListener);
|
||||
this.router.events.subscribe(
|
||||
() => (this.parentActive = this.router.url.split('/')[1])
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.parentActive = this.router.url.split('/')[1];
|
||||
|
||||
this.router.events.subscribe(() => {
|
||||
this.parentActive = this.router.url.split('/')[1];
|
||||
});
|
||||
}
|
||||
}
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
ChangeDetectorRef,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
import { navItems } from './sidebar-data';
|
||||
import { Router } from '@angular/router';
|
||||
import { NavService } from '../../../../services/nav.service';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { AppHorizontalNavItemComponent } from './nav-item/nav-item.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-sidebar',
|
||||
imports: [AppHorizontalNavItemComponent, CommonModule],
|
||||
templateUrl: './sidebar.component.html',
|
||||
})
|
||||
export class AppHorizontalSidebarComponent implements OnInit {
|
||||
navItems = navItems;
|
||||
parentActive = '';
|
||||
|
||||
mobileQuery: MediaQueryList;
|
||||
private _mobileQueryListener: () => void;
|
||||
|
||||
constructor(
|
||||
public navService: NavService,
|
||||
public router: Router,
|
||||
media: MediaMatcher,
|
||||
changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.mobileQuery = media.matchMedia('(min-width: 1100px)');
|
||||
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
|
||||
this.mobileQuery.addListener(this._mobileQueryListener);
|
||||
this.router.events.subscribe(
|
||||
() => (this.parentActive = this.router.url.split('/')[1])
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.parentActive = this.router.url.split('/')[1];
|
||||
|
||||
this.router.events.subscribe(() => {
|
||||
this.parentActive = this.router.url.split('/')[1];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
@if(pageInfo?.['title'] != 'Analytical' && pageInfo?.['title'] != 'eCommerce'){
|
||||
<div class="bg-light-primary rounded p-y-30 p-x-24 m-b-30 overflow-hidden">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h4 class="page-title m-0 f-s-20 f-w-600 m-b-16">
|
||||
{{ pageInfo?.['title'] }}
|
||||
</h4>
|
||||
<div class="d-flex align-items-center overflow-hidden">
|
||||
<ul class="breadcrumb">
|
||||
@for (url of pageInfo?.['urls']; track url.url;let index = $index,last
|
||||
= $last ) { @if(!last){
|
||||
|
||||
<li class="breadcrumb-item" [routerLink]="url.url">
|
||||
<a [routerLink]="url.url">{{ url.title }}</a>
|
||||
</li>
|
||||
}@else {
|
||||
<li class="breadcrumb-item">
|
||||
<i-tabler name="circle-filled" class="icon-8"></i-tabler>
|
||||
</li>
|
||||
<li class="breadcrumb-item active f-s-14">{{ url.title }}</li>
|
||||
} }
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 text-right position-relative">
|
||||
<div class="breadcrumb-icon">
|
||||
<img
|
||||
src="/assets/images/breadcrumb/ChatBc.png"
|
||||
alt="breadcrumb"
|
||||
width="165"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if(pageInfo?.['title'] != 'Analytical' && pageInfo?.['title'] != 'eCommerce'){
|
||||
<div class="bg-light-primary rounded p-y-30 p-x-24 m-b-30 overflow-hidden">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h4 class="page-title m-0 f-s-20 f-w-600 m-b-16">
|
||||
{{ pageInfo?.['title'] }}
|
||||
</h4>
|
||||
<div class="d-flex align-items-center overflow-hidden">
|
||||
<ul class="breadcrumb">
|
||||
@for (url of pageInfo?.['urls']; track url.url;let index = $index,last
|
||||
= $last ) { @if(!last){
|
||||
|
||||
<li class="breadcrumb-item" [routerLink]="url.url">
|
||||
<a [routerLink]="url.url">{{ url.title }}</a>
|
||||
</li>
|
||||
}@else {
|
||||
<li class="breadcrumb-item">
|
||||
<i-tabler name="circle-filled" class="icon-8"></i-tabler>
|
||||
</li>
|
||||
<li class="breadcrumb-item active f-s-14">{{ url.title }}</li>
|
||||
} }
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 text-right position-relative">
|
||||
<div class="breadcrumb-icon">
|
||||
<img
|
||||
src="/assets/images/breadcrumb/ChatBc.png"
|
||||
alt="breadcrumb"
|
||||
width="165"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
|
||||
import { filter, map, mergeMap } from 'rxjs/operators';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumb',
|
||||
imports: [RouterModule, TablerIconsModule],
|
||||
templateUrl: './breadcrumb.component.html',
|
||||
styleUrls: []
|
||||
})
|
||||
export class AppBreadcrumbComponent {
|
||||
// @Input() layout;
|
||||
pageInfo: Data | any = Object.create(null);
|
||||
myurl: any;
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private titleService: Title
|
||||
) {
|
||||
this.myurl = this.router.url.slice(1).split('/');
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
.pipe(map(() => this.activatedRoute))
|
||||
.pipe(
|
||||
map((route) => {
|
||||
while (route.firstChild) {
|
||||
route = route.firstChild;
|
||||
}
|
||||
return route;
|
||||
})
|
||||
)
|
||||
.pipe(filter((route) => route.outlet === 'primary'))
|
||||
.pipe(mergeMap((route) => route.data))
|
||||
// tslint:disable-next-line - Disables all
|
||||
.subscribe((event) => {
|
||||
// tslint:disable-next-line - Disables all
|
||||
this.titleService.setTitle(event['title'] + ' - Angular 20');
|
||||
this.pageInfo = event;
|
||||
});
|
||||
}
|
||||
}
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
|
||||
import { filter, map, mergeMap } from 'rxjs/operators';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumb',
|
||||
imports: [RouterModule, TablerIconsModule],
|
||||
templateUrl: './breadcrumb.component.html',
|
||||
styleUrls: []
|
||||
})
|
||||
export class AppBreadcrumbComponent {
|
||||
// @Input() layout;
|
||||
pageInfo: Data | any = Object.create(null);
|
||||
myurl: any;
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private titleService: Title
|
||||
) {
|
||||
this.myurl = this.router.url.slice(1).split('/');
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
.pipe(map(() => this.activatedRoute))
|
||||
.pipe(
|
||||
map((route) => {
|
||||
while (route.firstChild) {
|
||||
route = route.firstChild;
|
||||
}
|
||||
return route;
|
||||
})
|
||||
)
|
||||
.pipe(filter((route) => route.outlet === 'primary'))
|
||||
.pipe(mergeMap((route) => route.data))
|
||||
// tslint:disable-next-line - Disables all
|
||||
.subscribe((event) => {
|
||||
// tslint:disable-next-line - Disables all
|
||||
this.titleService.setTitle(event['title'] + ' - Angular 20');
|
||||
this.pageInfo = event;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,173 +1,173 @@
|
||||
<div class="customizerNav">
|
||||
<ng-scrollbar class="position-relative" style="height: calc(100vh - 85px)">
|
||||
<div class="p-24">
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16">Theme Option</h6>
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.theme" (change)="setDark()"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'light'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="sun-high" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Light
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'dark'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="moon" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Dark
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<div>
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Theme Colors
|
||||
</h6>
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.activeTheme"
|
||||
(change)="setColor($event.value)" class="customizer-button-group theme-colors two-row"
|
||||
[hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'blue_theme'">
|
||||
<span class="theme-circle blue_theme" matTooltip="blue_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'aqua_theme'">
|
||||
<span class="theme-circle aqua_theme" matTooltip="aqua_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'purple_theme'">
|
||||
<span class="theme-circle purple_theme" matTooltip="purple_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
|
||||
<mat-button-toggle [value]="'green_theme'">
|
||||
<span class="theme-circle green_theme" matTooltip="green_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'cyan_theme'">
|
||||
<span class="theme-circle cyan_theme" matTooltip="cyan_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'orange_theme'">
|
||||
<span class="theme-circle orange_theme" matTooltip="orange_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24">
|
||||
Theme Direction
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.dir" (change)="setDir($event.value)"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'ltr'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="text-direction-ltr" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
LTR
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'rtl'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="text-direction-rtl" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
RTL
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
@if(!options.horizontal){
|
||||
<div>
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Sidebar type
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.sidenavCollapsed"
|
||||
(change)="setSidebar($event.value)" class="customizer-button-group gap-16"
|
||||
[hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar-right" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Full
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Minisidebar
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
}
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Layout type
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.horizontal"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-distribute-vertical" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Vertical
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-distribute-horizontal" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Horizontal
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Card with
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.cardBorder"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="shadow" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Shadow
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="shadow-off" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Border
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Container Option
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.boxed"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-navbar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Full
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Boxed
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
<div class="customizerNav">
|
||||
<ng-scrollbar class="position-relative" style="height: calc(100vh - 85px)">
|
||||
<div class="p-24">
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16">Theme Option</h6>
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.theme" (change)="setDark()"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'light'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="sun-high" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Light
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'dark'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="moon" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Dark
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<div>
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Theme Colors
|
||||
</h6>
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.activeTheme"
|
||||
(change)="setColor($event.value)" class="customizer-button-group theme-colors two-row"
|
||||
[hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'blue_theme'">
|
||||
<span class="theme-circle blue_theme" matTooltip="blue_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'aqua_theme'">
|
||||
<span class="theme-circle aqua_theme" matTooltip="aqua_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'purple_theme'">
|
||||
<span class="theme-circle purple_theme" matTooltip="purple_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
|
||||
<mat-button-toggle [value]="'green_theme'">
|
||||
<span class="theme-circle green_theme" matTooltip="green_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'cyan_theme'">
|
||||
<span class="theme-circle cyan_theme" matTooltip="cyan_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'orange_theme'">
|
||||
<span class="theme-circle orange_theme" matTooltip="orange_theme" matTooltipClass="text-uppercase"
|
||||
matTooltipPosition="above">
|
||||
<i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
|
||||
</span>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24">
|
||||
Theme Direction
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.dir" (change)="setDir($event.value)"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="'ltr'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="text-direction-ltr" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
LTR
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="'rtl'">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="text-direction-rtl" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
RTL
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
@if(!options.horizontal){
|
||||
<div>
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Sidebar type
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.sidenavCollapsed"
|
||||
(change)="setSidebar($event.value)" class="customizer-button-group gap-16"
|
||||
[hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar-right" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Full
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Minisidebar
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
}
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Layout type
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.horizontal"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-distribute-vertical" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Vertical
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-distribute-horizontal" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Horizontal
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Card with
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.cardBorder"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="shadow" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Shadow
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="shadow-off" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Border
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
|
||||
Container Option
|
||||
</h6>
|
||||
|
||||
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.boxed"
|
||||
class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
|
||||
<mat-button-toggle [value]="false">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-navbar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Full
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">
|
||||
<div class="d-flex align-items-center f-w-500">
|
||||
<i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
|
||||
Boxed
|
||||
</div>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
.customizerNav {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.customizerNav {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,61 +1,61 @@
|
||||
import {
|
||||
Component,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ViewEncapsulation,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { AppSettings } from '../../../../config';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-customizer',
|
||||
imports: [
|
||||
TablerIconsModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
NgScrollbarModule,
|
||||
],
|
||||
templateUrl: './customizer.component.html',
|
||||
styleUrls: ['./customizer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CustomizerComponent {
|
||||
|
||||
options: AppSettings;
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
hideSingleSelectionIndicator = signal(true);
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
setDark() {
|
||||
this.settings.setOptions({ theme: 'dark' });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setColor(color: string) {
|
||||
this.settings.setOptions({ activeTheme: color });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setDir(dir: 'ltr' | 'rtl') {
|
||||
this.settings.setOptions({ dir: dir });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setSidebar(sidenavOpened: boolean) {
|
||||
this.settings.setOptions({ sidenavOpened: sidenavOpened });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
}
|
||||
|
||||
import {
|
||||
Component,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ViewEncapsulation,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { AppSettings } from '../../../../config';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-customizer',
|
||||
imports: [
|
||||
TablerIconsModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
NgScrollbarModule,
|
||||
],
|
||||
templateUrl: './customizer.component.html',
|
||||
styleUrls: ['./customizer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class CustomizerComponent {
|
||||
|
||||
options: AppSettings;
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
hideSingleSelectionIndicator = signal(true);
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
setDark() {
|
||||
this.settings.setOptions({ theme: 'dark' });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setColor(color: string) {
|
||||
this.settings.setOptions({ activeTheme: color });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setDir(dir: 'ltr' | 'rtl') {
|
||||
this.settings.setOptions({ dir: dir });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
setSidebar(sidenavOpened: boolean) {
|
||||
this.settings.setOptions({ sidenavOpened: sidenavOpened });
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,301 +1,301 @@
|
||||
<mat-toolbar class="topbar">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Desktop Menu -->
|
||||
@if(showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleCollapsed.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
@if(!showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="openDialog()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="f-s-12 text-body">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
|
||||
Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
|
||||
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="m-x-5 notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications" class="m-l-8"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<ng-scrollbar class="position-relative" style="height: 647px">
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-menu>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar class="topbar">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Desktop Menu -->
|
||||
@if(showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleCollapsed.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
@if(!showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="openDialog()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="f-s-12 text-body">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
|
||||
Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
|
||||
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="m-x-5 notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications" class="m-l-8"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<ng-scrollbar class="position-relative" style="height: 647px">
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 text-body">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-menu>
|
||||
</mat-toolbar>
|
||||
|
||||
@@ -1,310 +1,310 @@
|
||||
import {
|
||||
Component,
|
||||
Output,
|
||||
EventEmitter,
|
||||
Input,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { navItems } from '../sidebar/sidebar-data';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { AppSettings } from '../../../../config';
|
||||
|
||||
interface notifications {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
interface profiledd {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
imports: [
|
||||
RouterModule,
|
||||
CommonModule,
|
||||
NgScrollbarModule,
|
||||
TablerIconsModule,
|
||||
MaterialModule,
|
||||
],
|
||||
templateUrl: './header.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HeaderComponent {
|
||||
@Input() showToggle = true;
|
||||
@Input() toggleChecked = false;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleMobileFilterNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
showFiller = false;
|
||||
|
||||
public selectedLanguage: any = {
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
};
|
||||
|
||||
public languages: any[] = [
|
||||
{
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
},
|
||||
{
|
||||
language: 'Español',
|
||||
code: 'es',
|
||||
icon: '/assets/images/flag/icon-flag-es.svg',
|
||||
},
|
||||
{
|
||||
language: 'Français',
|
||||
code: 'fr',
|
||||
icon: '/assets/images/flag/icon-flag-fr.svg',
|
||||
},
|
||||
{
|
||||
language: 'German',
|
||||
code: 'de',
|
||||
icon: '/assets/images/flag/icon-flag-de.svg',
|
||||
},
|
||||
];
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private vsidenav: CoreService,
|
||||
public dialog: MatDialog,
|
||||
private translate: TranslateService
|
||||
) {
|
||||
translate.setDefaultLang('en');
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
options: AppSettings;
|
||||
|
||||
openDialog() {
|
||||
const dialogRef = this.dialog.open(AppSearchDialogComponent);
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
console.log(`Dialog result: ${result}`);
|
||||
});
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
|
||||
setlightDark(theme: string) {
|
||||
this.options.theme = theme;
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
changeLanguage(lang: any): void {
|
||||
this.translate.use(lang.code);
|
||||
this.selectedLanguage = lang;
|
||||
}
|
||||
|
||||
notifications: notifications[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/profile/user-1.jpg',
|
||||
title: 'Roman Joined thes Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/profile/user-2.jpg',
|
||||
title: 'New message received',
|
||||
subtitle: 'Salma sent you new message',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/profile/user-3.jpg',
|
||||
title: 'New Payment received',
|
||||
subtitle: 'Check your earnings',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/profile/user-4.jpg',
|
||||
title: 'Jolly completed tasks',
|
||||
subtitle: 'Assign her new tasks',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/profile/user-5.jpg',
|
||||
title: 'Roman Joined the Team!',
|
||||
subtitle: 'Congratulatse him',
|
||||
},
|
||||
];
|
||||
|
||||
profiledd: profiledd[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-account.svg',
|
||||
title: 'My Profile',
|
||||
subtitle: 'Account Settings',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-inbox.svg',
|
||||
title: 'My Inbox',
|
||||
subtitle: 'Messages & Email',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-tasks.svg',
|
||||
title: 'My Tasks',
|
||||
subtitle: 'To-do and Daily Tasks',
|
||||
link: '/apps/taskboard',
|
||||
},
|
||||
];
|
||||
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'Todo App',
|
||||
subtitle: 'Completed task',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Conatct List',
|
||||
subtitle: 'Create new contact',
|
||||
link: '/apps/contact-list',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'search-dialog',
|
||||
imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
|
||||
templateUrl: 'search-dialog.component.html'
|
||||
})
|
||||
export class AppSearchDialogComponent {
|
||||
searchText: string = '';
|
||||
navItems = navItems;
|
||||
|
||||
navItemsData = navItems.filter((navitem) => navitem.displayName);
|
||||
|
||||
// filtered = this.navItemsData.find((obj) => {
|
||||
// return obj.displayName == this.searchinput;
|
||||
// });
|
||||
}
|
||||
import {
|
||||
Component,
|
||||
Output,
|
||||
EventEmitter,
|
||||
Input,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { navItems } from '../sidebar/sidebar-data';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { AppSettings } from '../../../../config';
|
||||
|
||||
interface notifications {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
interface profiledd {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface apps {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface quicklinks {
|
||||
id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
imports: [
|
||||
RouterModule,
|
||||
CommonModule,
|
||||
NgScrollbarModule,
|
||||
TablerIconsModule,
|
||||
MaterialModule,
|
||||
],
|
||||
templateUrl: './header.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HeaderComponent {
|
||||
@Input() showToggle = true;
|
||||
@Input() toggleChecked = false;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleMobileFilterNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
showFiller = false;
|
||||
|
||||
public selectedLanguage: any = {
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
};
|
||||
|
||||
public languages: any[] = [
|
||||
{
|
||||
language: 'English',
|
||||
code: 'en',
|
||||
type: 'US',
|
||||
icon: '/assets/images/flag/icon-flag-en.svg',
|
||||
},
|
||||
{
|
||||
language: 'Español',
|
||||
code: 'es',
|
||||
icon: '/assets/images/flag/icon-flag-es.svg',
|
||||
},
|
||||
{
|
||||
language: 'Français',
|
||||
code: 'fr',
|
||||
icon: '/assets/images/flag/icon-flag-fr.svg',
|
||||
},
|
||||
{
|
||||
language: 'German',
|
||||
code: 'de',
|
||||
icon: '/assets/images/flag/icon-flag-de.svg',
|
||||
},
|
||||
];
|
||||
|
||||
@Output() optionsChange = new EventEmitter<AppSettings>();
|
||||
|
||||
constructor(
|
||||
private settings: CoreService,
|
||||
private vsidenav: CoreService,
|
||||
public dialog: MatDialog,
|
||||
private translate: TranslateService
|
||||
) {
|
||||
translate.setDefaultLang('en');
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
options: AppSettings;
|
||||
|
||||
openDialog() {
|
||||
const dialogRef = this.dialog.open(AppSearchDialogComponent);
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
console.log(`Dialog result: ${result}`);
|
||||
});
|
||||
}
|
||||
|
||||
private emitOptions() {
|
||||
this.optionsChange.emit(this.options);
|
||||
}
|
||||
|
||||
setlightDark(theme: string) {
|
||||
this.options.theme = theme;
|
||||
this.emitOptions();
|
||||
}
|
||||
|
||||
changeLanguage(lang: any): void {
|
||||
this.translate.use(lang.code);
|
||||
this.selectedLanguage = lang;
|
||||
}
|
||||
|
||||
notifications: notifications[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/profile/user-1.jpg',
|
||||
title: 'Roman Joined thes Team!',
|
||||
subtitle: 'Congratulate him',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/profile/user-2.jpg',
|
||||
title: 'New message received',
|
||||
subtitle: 'Salma sent you new message',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/profile/user-3.jpg',
|
||||
title: 'New Payment received',
|
||||
subtitle: 'Check your earnings',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/profile/user-4.jpg',
|
||||
title: 'Jolly completed tasks',
|
||||
subtitle: 'Assign her new tasks',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/profile/user-5.jpg',
|
||||
title: 'Roman Joined the Team!',
|
||||
subtitle: 'Congratulatse him',
|
||||
},
|
||||
];
|
||||
|
||||
profiledd: profiledd[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-account.svg',
|
||||
title: 'My Profile',
|
||||
subtitle: 'Account Settings',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-inbox.svg',
|
||||
title: 'My Inbox',
|
||||
subtitle: 'Messages & Email',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-tasks.svg',
|
||||
title: 'My Tasks',
|
||||
subtitle: 'To-do and Daily Tasks',
|
||||
link: '/apps/taskboard',
|
||||
},
|
||||
];
|
||||
|
||||
apps: apps[] = [
|
||||
{
|
||||
id: 1,
|
||||
img: '/assets/images/svgs/icon-dd-chat.svg',
|
||||
title: 'Chat Application',
|
||||
subtitle: 'Messages & Emails',
|
||||
link: '/apps/chat',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: '/assets/images/svgs/icon-dd-cart.svg',
|
||||
title: 'Todo App',
|
||||
subtitle: 'Completed task',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: '/assets/images/svgs/icon-dd-invoice.svg',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Get latest invoice',
|
||||
link: '/apps/invoice',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: '/assets/images/svgs/icon-dd-date.svg',
|
||||
title: 'Calendar App',
|
||||
subtitle: 'Get Dates',
|
||||
link: '/apps/calendar',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: '/assets/images/svgs/icon-dd-mobile.svg',
|
||||
title: 'Contact Application',
|
||||
subtitle: '2 Unsaved Contacts',
|
||||
link: '/apps/contacts',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
|
||||
title: 'Tickets App',
|
||||
subtitle: 'Create new ticket',
|
||||
link: '/apps/tickets',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: '/assets/images/svgs/icon-dd-message-box.svg',
|
||||
title: 'Email App',
|
||||
subtitle: 'Get new emails',
|
||||
link: '/apps/email/inbox',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: '/assets/images/svgs/icon-dd-application.svg',
|
||||
title: 'Conatct List',
|
||||
subtitle: 'Create new contact',
|
||||
link: '/apps/contact-list',
|
||||
},
|
||||
];
|
||||
|
||||
quicklinks: quicklinks[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Pricing Page',
|
||||
link: '/theme-pages/pricing',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Authentication Design',
|
||||
link: '/authentication/login',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Register Now',
|
||||
link: '/authentication/side-register',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '404 Error Page',
|
||||
link: '/authentication/error',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Notes App',
|
||||
link: '/apps/notes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Employee App',
|
||||
link: '/apps/employee',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Todo Application',
|
||||
link: '/apps/todo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Treeview',
|
||||
link: '/theme-pages/treeview',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'search-dialog',
|
||||
imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
|
||||
templateUrl: 'search-dialog.component.html'
|
||||
})
|
||||
export class AppSearchDialogComponent {
|
||||
searchText: string = '';
|
||||
navItems = navItems;
|
||||
|
||||
navItemsData = navItems.filter((navitem) => navitem.displayName);
|
||||
|
||||
// filtered = this.navItemsData.find((obj) => {
|
||||
// return obj.displayName == this.searchinput;
|
||||
// });
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
<div class="p-24 p-b-0">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
color="primary"
|
||||
class="hide-hint w-100"
|
||||
>
|
||||
<input matInput placeholder="Search here" [(ngModel)]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2 d-flex justify-content-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
mat-dialog-close
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content class="mat-typography search-dialog">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Page Links</h4>
|
||||
|
||||
@for(item of navItemsData; track item.displayName) {
|
||||
<a
|
||||
[routerLink]="[item.route]"
|
||||
mat-dialog-close
|
||||
class="p-y-12 text-decoration-none d-block"
|
||||
>
|
||||
<h5 class="f-s-14 f-w-500 d-block m-0">
|
||||
{{ item.displayName }}
|
||||
</h5>
|
||||
<span class="f-s-12 f-s-16">{{ item.route }}</span>
|
||||
</a>
|
||||
}
|
||||
</mat-dialog-content>
|
||||
<div class="p-24 p-b-0">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
color="primary"
|
||||
class="hide-hint w-100"
|
||||
>
|
||||
<input matInput placeholder="Search here" [(ngModel)]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2 d-flex justify-content-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
mat-dialog-close
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content class="mat-typography search-dialog">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Page Links</h4>
|
||||
|
||||
@for(item of navItemsData; track item.displayName) {
|
||||
<a
|
||||
[routerLink]="[item.route]"
|
||||
mat-dialog-close
|
||||
class="p-y-12 text-decoration-none d-block"
|
||||
>
|
||||
<h5 class="f-s-14 f-w-500 d-block m-0">
|
||||
{{ item.displayName }}
|
||||
</h5>
|
||||
<span class="f-s-12 f-s-16">{{ item.route }}</span>
|
||||
</a>
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-branding',
|
||||
imports: [CommonModule, RouterModule],
|
||||
standalone: true,
|
||||
template: `
|
||||
<a [routerLink]="'/'" class="logodark">
|
||||
<img
|
||||
src="./assets/images/logos/logo e-dias.svg"
|
||||
class="align-middle m-2"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a [routerLink]="'/'" class="logolight">
|
||||
<img
|
||||
src="./assets/images/logos/light-logo.svg"
|
||||
class="align-middle m-2"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
`,
|
||||
})
|
||||
export class BrandingComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../../services/core.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-branding',
|
||||
imports: [CommonModule, RouterModule],
|
||||
standalone: true,
|
||||
template: `
|
||||
<a [routerLink]="'/'" class="logodark">
|
||||
<img
|
||||
src="./assets/images/logos/logo e-dias.svg"
|
||||
class="align-middle m-2"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a [routerLink]="'/'" class="logolight">
|
||||
<img
|
||||
src="./assets/images/logos/light-logo.svg"
|
||||
class="align-middle m-2"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
`,
|
||||
})
|
||||
export class BrandingComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
@if(item.navCap){
|
||||
<div mat-subheader class="nav-caption">
|
||||
{{ item.navCap }}
|
||||
</div>
|
||||
} @if(!item.navCap && !item.external && !item.twoLines) {
|
||||
<a mat-list-item (click)="onItemSelected(item)" [ngClass]="{
|
||||
'mat-toolbar mat-primary activeMenu': item.route
|
||||
? router.isActive(item.route, true)
|
||||
: false,
|
||||
expanded: expanded, activemenu: isChildActive(item),
|
||||
disabled: item.disabled
|
||||
}" class="menu-list-item">
|
||||
<i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
|
||||
<span class="hide-menu">{{ item.displayName | translate }}</span>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
@if(item.children && item.children.length) {
|
||||
@if(item.chip) {
|
||||
<span>
|
||||
<span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
|
||||
</span>
|
||||
}
|
||||
<span class="arrow-icon" fxFlex>
|
||||
<span fxFlex></span>
|
||||
<mat-icon [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'">
|
||||
expand_more
|
||||
</mat-icon>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
@if(item.chip && !item.children ) {
|
||||
<span>
|
||||
<span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- external Link -->
|
||||
|
||||
@if(!item.navCap && item.external) {
|
||||
<mat-list-item onClick="window.open('//google.com')" class="menu-list-item" target="_blank">
|
||||
<i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
|
||||
<span class="hide-menu">{{ item.displayName | translate }}</span>
|
||||
</mat-list-item>
|
||||
}
|
||||
|
||||
<!-- children -->
|
||||
@if(expanded) { @for(child of item.children; track child) {
|
||||
<app-nav-item [item]="child" (click)="onSubItemSelected(child)" [depth]="depth + 1">
|
||||
</app-nav-item>
|
||||
@if(item.navCap){
|
||||
<div mat-subheader class="nav-caption">
|
||||
{{ item.navCap }}
|
||||
</div>
|
||||
} @if(!item.navCap && !item.external && !item.twoLines) {
|
||||
<a mat-list-item (click)="onItemSelected(item)" [ngClass]="{
|
||||
'mat-toolbar mat-primary activeMenu': item.route
|
||||
? router.isActive(item.route, true)
|
||||
: false,
|
||||
expanded: expanded, activemenu: isChildActive(item),
|
||||
disabled: item.disabled
|
||||
}" class="menu-list-item">
|
||||
<i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
|
||||
<span class="hide-menu">{{ item.displayName | translate }}</span>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
@if(item.children && item.children.length) {
|
||||
@if(item.chip) {
|
||||
<span>
|
||||
<span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
|
||||
</span>
|
||||
}
|
||||
<span class="arrow-icon" fxFlex>
|
||||
<span fxFlex></span>
|
||||
<mat-icon [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'">
|
||||
expand_more
|
||||
</mat-icon>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
@if(item.chip && !item.children ) {
|
||||
<span>
|
||||
<span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- external Link -->
|
||||
|
||||
@if(!item.navCap && item.external) {
|
||||
<mat-list-item onClick="window.open('//google.com')" class="menu-list-item" target="_blank">
|
||||
<i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
|
||||
<span class="hide-menu">{{ item.displayName | translate }}</span>
|
||||
</mat-list-item>
|
||||
}
|
||||
|
||||
<!-- children -->
|
||||
@if(expanded) { @for(child of item.children; track child) {
|
||||
<app-nav-item [item]="child" (click)="onSubItemSelected(child)" [depth]="depth + 1">
|
||||
</app-nav-item>
|
||||
} }
|
||||
@@ -1,103 +1,103 @@
|
||||
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 '../../../../../material.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-item',
|
||||
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<void>();
|
||||
@Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
|
||||
expanded: any = false;
|
||||
disabled: any = false;
|
||||
twoLines: any = false;
|
||||
@HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
|
||||
@Input() item: NavItem | any;
|
||||
@Input() depth: any;
|
||||
|
||||
constructor(public navService: NavService, public router: Router) {
|
||||
if (this.depth === undefined) {
|
||||
this.depth = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
const url = this.navService.currentUrl();
|
||||
if (this.item.route && url) {
|
||||
this.expanded = url.indexOf(`/${this.item.route}`) === 0;
|
||||
this.ariaExpanded = this.expanded;
|
||||
}
|
||||
}
|
||||
|
||||
onItemSelected(item: NavItem) {
|
||||
if (!item.children || !item.children.length) {
|
||||
this.router.navigate([item.route]);
|
||||
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isDirectlyActive(item: NavItem): boolean {
|
||||
return !!item.route && this.router.isActive(item.route, true);
|
||||
}
|
||||
|
||||
isChildActive(item: NavItem): boolean {
|
||||
if (!item.children) return false;
|
||||
return item.children.some(
|
||||
(child) => this.isDirectlyActive(child) || this.isChildActive(child)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
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 '../../../../../material.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-item',
|
||||
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<void>();
|
||||
@Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
|
||||
expanded: any = false;
|
||||
disabled: any = false;
|
||||
twoLines: any = false;
|
||||
@HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
|
||||
@Input() item: NavItem | any;
|
||||
@Input() depth: any;
|
||||
|
||||
constructor(public navService: NavService, public router: Router) {
|
||||
if (this.depth === undefined) {
|
||||
this.depth = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
const url = this.navService.currentUrl();
|
||||
if (this.item.route && url) {
|
||||
this.expanded = url.indexOf(`/${this.item.route}`) === 0;
|
||||
this.ariaExpanded = this.expanded;
|
||||
}
|
||||
}
|
||||
|
||||
onItemSelected(item: NavItem) {
|
||||
if (!item.children || !item.children.length) {
|
||||
this.router.navigate([item.route]);
|
||||
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isDirectlyActive(item: NavItem): boolean {
|
||||
return !!item.route && this.router.isActive(item.route, true);
|
||||
}
|
||||
|
||||
isChildActive(item: NavItem): boolean {
|
||||
if (!item.children) return false;
|
||||
return item.children.some(
|
||||
(child) => this.isDirectlyActive(child) || this.isChildActive(child)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
export interface NavItem {
|
||||
displayName?: string;
|
||||
disabled?: boolean;
|
||||
external?: boolean;
|
||||
twoLines?: boolean;
|
||||
chip?: boolean;
|
||||
iconName?: string;
|
||||
navCap?: string;
|
||||
chipContent?: string;
|
||||
chipClass?: string;
|
||||
subtext?: string;
|
||||
route?: string;
|
||||
children?: NavItem[];
|
||||
ddType?: string;
|
||||
export interface NavItem {
|
||||
displayName?: string;
|
||||
disabled?: boolean;
|
||||
external?: boolean;
|
||||
twoLines?: boolean;
|
||||
chip?: boolean;
|
||||
iconName?: string;
|
||||
navCap?: string;
|
||||
chipContent?: string;
|
||||
chipClass?: string;
|
||||
subtext?: string;
|
||||
route?: string;
|
||||
children?: NavItem[];
|
||||
ddType?: string;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,15 +1,15 @@
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
@if(showToggle) {
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex justify-content-center ng-star-inserted icon-40 align-items-center f-s-14"
|
||||
>
|
||||
<i-tabler name="x" class="icon-20 d-flex"></i-tabler>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
@if(showToggle) {
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex justify-content-center ng-star-inserted icon-40 align-items-center f-s-14"
|
||||
>
|
||||
<i-tabler name="x" class="icon-20 d-flex"></i-tabler>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { BrandingComponent } from './branding.component';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
imports: [BrandingComponent, TablerIconsModule, MaterialModule],
|
||||
templateUrl: './sidebar.component.html'
|
||||
})
|
||||
export class SidebarComponent implements OnInit {
|
||||
constructor() { }
|
||||
@Input() showToggle = true;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
ngOnInit(): void { }
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { BrandingComponent } from './branding.component';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
import { MaterialModule } from '../../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
imports: [BrandingComponent, TablerIconsModule, MaterialModule],
|
||||
templateUrl: './sidebar.component.html'
|
||||
})
|
||||
export class SidebarComponent implements OnInit {
|
||||
constructor() { }
|
||||
@Input() showToggle = true;
|
||||
@Output() toggleMobileNav = new EventEmitter<void>();
|
||||
@Output() toggleCollapsed = new EventEmitter<void>();
|
||||
|
||||
ngOnInit(): void { }
|
||||
}
|
||||
@@ -1,89 +1,89 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
// Material Form Controls
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSliderModule } from '@angular/material/slider';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
// Material Navigation
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
// Material Layout
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
// Material Buttons & Indicators
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
// Material Popups & Modals
|
||||
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
// Material Data tables
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
|
||||
],
|
||||
exports: [
|
||||
MatAutocompleteModule,
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatSliderModule,
|
||||
MatSlideToggleModule,
|
||||
MatMenuModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
MatCardModule,
|
||||
MatDividerModule,
|
||||
MatExpansionModule,
|
||||
MatGridListModule,
|
||||
MatListModule,
|
||||
MatStepperModule,
|
||||
MatTabsModule,
|
||||
MatTreeModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatBadgeModule,
|
||||
MatChipsModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatProgressBarModule,
|
||||
MatRippleModule,
|
||||
MatBottomSheetModule,
|
||||
MatDialogModule,
|
||||
MatSnackBarModule,
|
||||
MatTooltipModule,
|
||||
MatPaginatorModule,
|
||||
MatSortModule,
|
||||
MatTableModule,
|
||||
],
|
||||
|
||||
})
|
||||
export class MaterialModule {}
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
// Material Form Controls
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSliderModule } from '@angular/material/slider';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
// Material Navigation
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
// Material Layout
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatStepperModule } from '@angular/material/stepper';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
// Material Buttons & Indicators
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
// Material Popups & Modals
|
||||
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
// Material Data tables
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
|
||||
],
|
||||
exports: [
|
||||
MatAutocompleteModule,
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatSliderModule,
|
||||
MatSlideToggleModule,
|
||||
MatMenuModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
MatCardModule,
|
||||
MatDividerModule,
|
||||
MatExpansionModule,
|
||||
MatGridListModule,
|
||||
MatListModule,
|
||||
MatStepperModule,
|
||||
MatTabsModule,
|
||||
MatTreeModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatBadgeModule,
|
||||
MatChipsModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatProgressBarModule,
|
||||
MatRippleModule,
|
||||
MatBottomSheetModule,
|
||||
MatDialogModule,
|
||||
MatSnackBarModule,
|
||||
MatTooltipModule,
|
||||
MatPaginatorModule,
|
||||
MatSortModule,
|
||||
MatTableModule,
|
||||
],
|
||||
|
||||
})
|
||||
export class MaterialModule {}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AppBoxedForgotPasswordComponent } from './boxed-forgot-password/boxed-forgot-password.component';
|
||||
import { AppBoxedLoginComponent } from './boxed-login/boxed-login.component';
|
||||
import { AppBoxedRegisterComponent } from './boxed-register/boxed-register.component';
|
||||
import { AppBoxedTwoStepsComponent } from './boxed-two-steps/boxed-two-steps.component';
|
||||
import { AppErrorComponent } from './error/error.component';
|
||||
import { AppMaintenanceComponent } from './maintenance/maintenance.component';
|
||||
import { AppSideForgotPasswordComponent } from './side-forgot-password/side-forgot-password.component';
|
||||
import { AppSideLoginComponent } from './side-login/side-login.component';
|
||||
import { AppSideRegisterComponent } from './side-register/side-register.component';
|
||||
import { AppSideTwoStepsComponent } from './side-two-steps/side-two-steps.component';
|
||||
|
||||
export const AuthenticationRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'boxed-forgot-pwd',
|
||||
component: AppBoxedForgotPasswordComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-login',
|
||||
component: AppBoxedLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-register',
|
||||
component: AppBoxedRegisterComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-two-steps',
|
||||
component: AppBoxedTwoStepsComponent,
|
||||
},
|
||||
{
|
||||
path: 'error',
|
||||
component: AppErrorComponent,
|
||||
},
|
||||
{
|
||||
path: 'maintenance',
|
||||
component: AppMaintenanceComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-forgot-pwd',
|
||||
component: AppSideForgotPasswordComponent,
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
component: AppSideLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-register',
|
||||
component: AppSideRegisterComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-two-steps',
|
||||
component: AppSideTwoStepsComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AppBoxedForgotPasswordComponent } from './boxed-forgot-password/boxed-forgot-password.component';
|
||||
import { AppBoxedLoginComponent } from './boxed-login/boxed-login.component';
|
||||
import { AppBoxedRegisterComponent } from './boxed-register/boxed-register.component';
|
||||
import { AppBoxedTwoStepsComponent } from './boxed-two-steps/boxed-two-steps.component';
|
||||
import { AppErrorComponent } from './error/error.component';
|
||||
import { AppMaintenanceComponent } from './maintenance/maintenance.component';
|
||||
import { AppSideForgotPasswordComponent } from './side-forgot-password/side-forgot-password.component';
|
||||
import { AppSideLoginComponent } from './side-login/side-login.component';
|
||||
import { AppSideRegisterComponent } from './side-register/side-register.component';
|
||||
import { AppSideTwoStepsComponent } from './side-two-steps/side-two-steps.component';
|
||||
|
||||
export const AuthenticationRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'boxed-forgot-pwd',
|
||||
component: AppBoxedForgotPasswordComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-login',
|
||||
component: AppBoxedLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-register',
|
||||
component: AppBoxedRegisterComponent,
|
||||
},
|
||||
{
|
||||
path: 'boxed-two-steps',
|
||||
component: AppBoxedTwoStepsComponent,
|
||||
},
|
||||
{
|
||||
path: 'error',
|
||||
component: AppErrorComponent,
|
||||
},
|
||||
{
|
||||
path: 'maintenance',
|
||||
component: AppMaintenanceComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-forgot-pwd',
|
||||
component: AppSideForgotPasswordComponent,
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
component: AppSideLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-register',
|
||||
component: AppSideRegisterComponent,
|
||||
},
|
||||
{
|
||||
path: 'side-two-steps',
|
||||
component: AppSideTwoStepsComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8 text-center m-t-30"
|
||||
>Please enter the email address associated with your account and We
|
||||
will email you a link to reset your password.</span
|
||||
>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Forgot Password
|
||||
</button>
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100 m-t-8"
|
||||
>
|
||||
Back to Login
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8 text-center m-t-30"
|
||||
>Please enter the email address associated with your account and We
|
||||
will email you a link to reset your password.</span
|
||||
>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Forgot Password
|
||||
</button>
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100 m-t-8"
|
||||
>
|
||||
Back to Login
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-forgot-password',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './boxed-forgot-password.component.html',
|
||||
})
|
||||
export class AppBoxedForgotPasswordComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
email: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-forgot-password',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './boxed-forgot-password.component.html',
|
||||
})
|
||||
export class AppBoxedForgotPasswordComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
email: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,108 +1,108 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Username</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['password'].errors && f['password'].errors['required']) {
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
||||
>Forgot Password ?</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24"
|
||||
>New to Modernize?
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Create an account</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Username</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['password'].errors && f['password'].errors['required']) {
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
||||
>Forgot Password ?</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24"
|
||||
>New to Modernize?
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Create an account</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-login',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './boxed-login.component.html',
|
||||
})
|
||||
export class AppBoxedLoginComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
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(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-login',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './boxed-login.component.html',
|
||||
})
|
||||
export class AppBoxedLoginComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
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(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,112 +1,112 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['password'].errors && f['password'].errors['required']) {
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24"
|
||||
>Already have an Account?
|
||||
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-login']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Sign In</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['password'].errors && f['password'].errors['required']) {
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24"
|
||||
>Already have an Account?
|
||||
|
||||
<a
|
||||
[routerLink]="['/authentication/boxed-login']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Sign In</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-register',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
BrandingComponent,
|
||||
ReactiveFormsModule,
|
||||
],
|
||||
templateUrl: './boxed-register.component.html',
|
||||
})
|
||||
export class AppBoxedRegisterComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-register',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
BrandingComponent,
|
||||
ReactiveFormsModule,
|
||||
],
|
||||
templateUrl: './boxed-register.component.html',
|
||||
})
|
||||
export class AppBoxedRegisterComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<span class="f-s-14 d-block f-s-14 text-center m-t-30"
|
||||
>We sent a verification code to your mobile. Enter the code from the
|
||||
mobile in the field below.</span
|
||||
>
|
||||
<span class="f-w-600 d-block m-t-16 text-center">******1234</span>
|
||||
|
||||
<form class="m-t-30 p-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Type your 6 digits security code</mat-label
|
||||
>
|
||||
<div class="d-flex align-items-center"></div>
|
||||
<div class="row custom-row">
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>
|
||||
Verify My Account
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block f-s-14 m-t-24"
|
||||
>Didn't get the code?
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
class="text-decoration-none text-primary f-w-500"
|
||||
>Resend</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center">
|
||||
<div
|
||||
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
||||
>
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<span class="f-s-14 d-block f-s-14 text-center m-t-30"
|
||||
>We sent a verification code to your mobile. Enter the code from the
|
||||
mobile in the field below.</span
|
||||
>
|
||||
<span class="f-w-600 d-block m-t-16 text-center">******1234</span>
|
||||
|
||||
<form class="m-t-30 p-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Type your 6 digits security code</mat-label
|
||||
>
|
||||
<div class="d-flex align-items-center"></div>
|
||||
<div class="row custom-row">
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>
|
||||
Verify My Account
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block f-s-14 m-t-24"
|
||||
>Didn't get the code?
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
class="text-decoration-none text-primary f-w-500"
|
||||
>Resend</a
|
||||
>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-two-steps',
|
||||
imports: [RouterModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './boxed-two-steps.component.html'
|
||||
})
|
||||
export class AppBoxedTwoStepsComponent {
|
||||
options;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-boxed-two-steps',
|
||||
imports: [RouterModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './boxed-two-steps.component.html'
|
||||
})
|
||||
export class AppBoxedTwoStepsComponent {
|
||||
options;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="/assets/images/backgrounds/errorimg.svg" alt="error-bg" />
|
||||
<h2 class="auth-title f-w-600">Opps!!!</h2>
|
||||
<h6 class="f-s-20 f-w-600 m-b-30">This page you are looking for could not be found.</h6>
|
||||
<a mat-flat-button [routerLink]="['/']">Go back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="/assets/images/backgrounds/errorimg.svg" alt="error-bg" />
|
||||
<h2 class="auth-title f-w-600">Opps!!!</h2>
|
||||
<h6 class="f-s-20 f-w-600 m-b-30">This page you are looking for could not be found.</h6>
|
||||
<a mat-flat-button [routerLink]="['/']">Go back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
imports: [RouterModule, MaterialModule, MatButtonModule],
|
||||
templateUrl: './error.component.html'
|
||||
})
|
||||
export class AppErrorComponent {}
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
imports: [RouterModule, MaterialModule, MatButtonModule],
|
||||
templateUrl: './error.component.html'
|
||||
})
|
||||
export class AppErrorComponent {}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="/assets/images/backgrounds/maintenance.svg" alt="error-bg" />
|
||||
<h2 class="auth-title f-w-600">Maintenance Mode!!!</h2>
|
||||
<h6 class="f-s-20 f-w-600 m-b-30">Website is Under Construction. Check back later!</h6>
|
||||
<a mat-flat-button [routerLink]="['/dashboards/dashboard1']">Go back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<img src="/assets/images/backgrounds/maintenance.svg" alt="error-bg" />
|
||||
<h2 class="auth-title f-w-600">Maintenance Mode!!!</h2>
|
||||
<h6 class="f-s-20 f-w-600 m-b-30">Website is Under Construction. Check back later!</h6>
|
||||
<a mat-flat-button [routerLink]="['/dashboards/dashboard1']">Go back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-maintenance',
|
||||
imports: [RouterModule, MaterialModule, MatButtonModule],
|
||||
templateUrl: './maintenance.component.html',
|
||||
})
|
||||
export class AppMaintenanceComponent {}
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-maintenance',
|
||||
imports: [RouterModule, MaterialModule, MatButtonModule],
|
||||
templateUrl: './maintenance.component.html',
|
||||
})
|
||||
export class AppMaintenanceComponent {}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0 d-flex justify-content-center">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Forgot your password?</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Please enter the email address associated with your account and
|
||||
We will email you a link to reset your password.</span
|
||||
>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Forgot Password
|
||||
</button>
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100 m-t-8"
|
||||
>
|
||||
Back to Login
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0 d-flex justify-content-center">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Forgot your password?</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Please enter the email address associated with your account and
|
||||
We will email you a link to reset your password.</span
|
||||
>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Adddress</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Forgot Password
|
||||
</button>
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100 m-t-8"
|
||||
>
|
||||
Back to Login
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-forgot-password',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './side-forgot-password.component.html',
|
||||
})
|
||||
export class AppSideForgotPasswordComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
email: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import {
|
||||
FormGroup,
|
||||
FormControl,
|
||||
Validators,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-forgot-password',
|
||||
imports: [
|
||||
RouterModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BrandingComponent,
|
||||
],
|
||||
templateUrl: './side-forgot-password.component.html',
|
||||
})
|
||||
export class AppSideForgotPasswordComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
email: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,138 +1,138 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9 max-width-form">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Your Admin Dashboard</span
|
||||
>
|
||||
|
||||
<div class="row m-t-24">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Username</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if( f['password'].errors && f['password'].errors['required'])
|
||||
{
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary"
|
||||
>Remember this Device</mat-checkbox
|
||||
>
|
||||
<a
|
||||
[routerLink]="['/authentication/side-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
||||
>Forgot Password ?</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block m-t-24"
|
||||
>New to Modernize?
|
||||
<a
|
||||
[routerLink]="['/authentication/side-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Create an account</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9 max-width-form">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Your Admin Dashboard</span
|
||||
>
|
||||
|
||||
<div class="row m-t-24">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Username</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if( f['password'].errors && f['password'].errors['required'])
|
||||
{
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary"
|
||||
>Remember this Device</mat-checkbox
|
||||
>
|
||||
<a
|
||||
[routerLink]="['/authentication/side-forgot-pwd']"
|
||||
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
||||
>Forgot Password ?</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block m-t-24"
|
||||
>New to Modernize?
|
||||
<a
|
||||
[routerLink]="['/authentication/side-register']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Create an account</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-login',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
|
||||
templateUrl: './side-login.component.html'
|
||||
})
|
||||
export class AppSideLoginComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
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(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-login',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
|
||||
templateUrl: './side-login.component.html'
|
||||
})
|
||||
export class AppSideLoginComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
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(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,146 +1,146 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9 max-width-form">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Your Admin Dashboard</span
|
||||
>
|
||||
|
||||
<div class="row m-t-24">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Name</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- email -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Address</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if( f['password'].errors && f['password'].errors['required'])
|
||||
{
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block m-t-24"
|
||||
>Already have an Account?
|
||||
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Sign In</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-7 col-xl-8 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 p-0">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
|
||||
>
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-lg-9 max-width-form">
|
||||
<h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-8"
|
||||
>Your Admin Dashboard</span
|
||||
>
|
||||
|
||||
<div class="row m-t-24">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/google-icon.svg"
|
||||
alt="google"
|
||||
width="16"
|
||||
class="m-r-8"
|
||||
/>
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="w-100 d-flex align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="/assets/images/svgs/facebook-icon.svg"
|
||||
alt="facebook"
|
||||
width="40"
|
||||
class="m-r-4"
|
||||
/>
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Name</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput formControlName="uname" />
|
||||
@if(f['uname'].touched && f['uname'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['uname'].errors && f['uname'].errors['required']) {
|
||||
<div class="text-error">Name is required.</div>
|
||||
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
||||
<div class="text-error">Name should be 6 character.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- email -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Email Address</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="email" formControlName="email" />
|
||||
@if(f['email'].touched && f['email'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if(f['email'].errors && f['email'].errors['required']) {
|
||||
<div class="text-error">Email is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Password</mat-label
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput type="password" formControlName="password" />
|
||||
@if(f['password'].touched && f['password'].invalid) {
|
||||
<mat-hint class="m-b-16 error-msg">
|
||||
@if( f['password'].errors && f['password'].errors['required'])
|
||||
{
|
||||
<div class="text-error">Password is required.</div>
|
||||
}
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block m-t-24"
|
||||
>Already have an Account?
|
||||
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
class="text-decoration-none text-primary f-w-500 f-s-14"
|
||||
>
|
||||
Sign In</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-register',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
|
||||
templateUrl: './side-register.component.html'
|
||||
})
|
||||
export class AppSideRegisterComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-register',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
|
||||
templateUrl: './side-register.component.html'
|
||||
})
|
||||
export class AppSideRegisterComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/dashboards/dashboard1']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,114 @@
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-8 col-xl-9 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-xl-3 p-0 d-flex justify-content-center">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center h-100 max-width-form justify-content-center"
|
||||
>
|
||||
<div>
|
||||
<h4 class="f-w-700 f-s-20 m-0">Two Step Verification</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-24"
|
||||
>We sent a verification code to your mobile. Enter the code from the
|
||||
mobile in the field below.</span
|
||||
>
|
||||
<span class="f-w-600 d-block m-t-16">******1234</span>
|
||||
|
||||
<form class="m-t-30 p-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Type your 6 digits security code</mat-label
|
||||
>
|
||||
<div class="d-flex align-items-center"></div>
|
||||
<div class="row custom-row">
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>
|
||||
Verify My Account
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block f-s-14 m-t-24"
|
||||
>Didn't get the code?
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
class="text-decoration-none text-primary f-w-500"
|
||||
>Resend</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center">
|
||||
<div class="position-relative row w-100 h-100">
|
||||
<div class="col-lg-8 col-xl-9 bg-gredient p-0">
|
||||
<div class="p-24 h-100">
|
||||
<app-branding></app-branding>
|
||||
|
||||
<div
|
||||
class="align-items-center justify-content-center img-height d-none d-lg-flex"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/backgrounds/login-bg.svg"
|
||||
alt="login"
|
||||
style="max-width: 500px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-xl-3 p-0 d-flex justify-content-center">
|
||||
<div
|
||||
class="p-32 d-flex align-items-start align-items-lg-center h-100 max-width-form justify-content-center"
|
||||
>
|
||||
<div>
|
||||
<h4 class="f-w-700 f-s-20 m-0">Two Step Verification</h4>
|
||||
<span class="f-s-14 d-block f-s-14 m-t-24"
|
||||
>We sent a verification code to your mobile. Enter the code from the
|
||||
mobile in the field below.</span
|
||||
>
|
||||
<span class="f-w-600 d-block m-t-16">******1234</span>
|
||||
|
||||
<form class="m-t-30 p-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
||||
>Type your 6 digits security code</mat-label
|
||||
>
|
||||
<div class="d-flex align-items-center"></div>
|
||||
<div class="row custom-row">
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
class="w-100"
|
||||
color="primary"
|
||||
>
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>
|
||||
Verify My Account
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 d-block f-s-14 m-t-24"
|
||||
>Didn't get the code?
|
||||
<a
|
||||
[routerLink]="['/dashboards/dashboard1']"
|
||||
class="text-decoration-none text-primary f-w-500"
|
||||
>Resend</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-two-steps',
|
||||
imports: [RouterModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './side-two-steps.component.html',
|
||||
})
|
||||
export class AppSideTwoStepsComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CoreService } from '../../../services/core.service';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-two-steps',
|
||||
imports: [RouterModule, MaterialModule, BrandingComponent],
|
||||
templateUrl: './side-two-steps.component.html',
|
||||
})
|
||||
export class AppSideTwoStepsComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private settings: CoreService) {
|
||||
this.options = this.settings.getOptions();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,169 +1,169 @@
|
||||
<div class="contact-page">
|
||||
<div class="banner-section bg-light-primary contact-herder spacing-top-bottom">
|
||||
<div class="container p-y-20">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="m-b-24 f-s-48 lh-normal section-sub-title">
|
||||
Get to know Modernize Dashboard Template
|
||||
</h1>
|
||||
<div class="hstack">
|
||||
<a mat-flat-button color="primary">Create an account</a>
|
||||
<a mat-stroked-button color="primary" class="border-primary">View Open
|
||||
Positions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<p class="lh-base m-t-32">
|
||||
Do you need a highly customizable and developer friendly premium
|
||||
Angular admin template packed with numerous features? Modernize
|
||||
Angular Admin Template has everything you need. This bootstrap based
|
||||
admin template is designed in accordance with industry standards and
|
||||
best practices to provide you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom setup-process">
|
||||
<div class="container">
|
||||
<h2 class="text-center section-sub-title m-b-48 f-s-40 lh-normal">
|
||||
The hassle-free setup process
|
||||
</h2>
|
||||
<div class="row">
|
||||
@for(topcard of setupCards; track topcard.title) {
|
||||
<div class="col-lg-3 col-sm-6 d-flex align-items-stretch">
|
||||
<mat-card class="shadow-none text-center w-100 bg-light-{{
|
||||
topcard.color
|
||||
}} rounded-8 ">
|
||||
<mat-card-content>
|
||||
<div class="m-t-16">
|
||||
@if(topcard.id!==2){
|
||||
<img [src]="topcard.img" alt="users" width="40" class="rounded-circle" />
|
||||
}
|
||||
|
||||
<h6 class="f-s-16 m-t-16">
|
||||
{{ topcard.title }}
|
||||
</h6>
|
||||
<p class="f-s-14 m-t-16 m-b-0">
|
||||
{{ topcard.subtitle }}
|
||||
</p>
|
||||
@if(topcard.id===2){
|
||||
<img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-10 m-b--32" />
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="spacing-top-bottom key-metric">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-5">
|
||||
<div class="m-b-32">
|
||||
<h2 class="f-s-40 m-b-16 section-sub-title f-s-40 lh-normal">Key metric at a glance</h2>
|
||||
<p class="f-s-14 m-0 lh-base">
|
||||
From the year we were founded to the impressive customer base
|
||||
we've built, and the growth percentages that reflect our
|
||||
continuous improvement, these numbers tell our story at a glance.
|
||||
Explore the data that drives our mission and underscores our
|
||||
commitment to excellence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row stat-section">
|
||||
@for (stat of stats; track stat) {
|
||||
<div class="col-6 m-b-32">
|
||||
<div class="stat-block">
|
||||
<p class="stat-label f-s-12 f-w-400 text-uppercase text-primary m-y-0">
|
||||
{{ stat.label }}
|
||||
</p>
|
||||
<h2 class="stat-value f-s-48 lh-normal section-sub-title">
|
||||
{{ stat.value }}
|
||||
</h2>
|
||||
<p class="f-s-14 m-y-0">{{ stat.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-leadership spacing-top p-b-48">
|
||||
<app-image-slider></app-image-slider>
|
||||
</div>
|
||||
|
||||
<div class="features spacing-bottom">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-between">
|
||||
<!--row-->
|
||||
<div class="col-md-5 m-b-30">
|
||||
<div class="client-margin">
|
||||
<h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
|
||||
What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
|
||||
about us?
|
||||
</h2>
|
||||
<p class="m-0">
|
||||
Our users' feedback is a testament to our commitment to quality
|
||||
and user satisfaction. Read what they have to say about their
|
||||
journey with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
|
||||
<mat-card-content>
|
||||
<mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
|
||||
|
||||
<div class="d-flex align-items-center gap-16 m-b-24">
|
||||
<div>
|
||||
<img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
|
||||
</div>
|
||||
|
||||
<p class="f-s-14 m-b-16 m-t-0">
|
||||
Our users' feedback is a testament to our commitment to quality
|
||||
and user satisfaction. Read what they have to say about their
|
||||
journey with us.
|
||||
</p>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="d-flex align-items-center gap-10 m-t-8">
|
||||
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
|
||||
(click)="goPrev()">
|
||||
<i-tabler name="chevron-left"
|
||||
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
|
||||
<span class="f-s-14">{{ displayCount() }}</span>
|
||||
|
||||
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
|
||||
(click)="goNext()">
|
||||
<i-tabler name="chevron-right"
|
||||
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
|
||||
<div class="contact-page">
|
||||
<div class="banner-section bg-light-primary contact-herder spacing-top-bottom">
|
||||
<div class="container p-y-20">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="m-b-24 f-s-48 lh-normal section-sub-title">
|
||||
Get to know Modernize Dashboard Template
|
||||
</h1>
|
||||
<div class="hstack">
|
||||
<a mat-flat-button color="primary">Create an account</a>
|
||||
<a mat-stroked-button color="primary" class="border-primary">View Open
|
||||
Positions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<p class="lh-base m-t-32">
|
||||
Do you need a highly customizable and developer friendly premium
|
||||
Angular admin template packed with numerous features? Modernize
|
||||
Angular Admin Template has everything you need. This bootstrap based
|
||||
admin template is designed in accordance with industry standards and
|
||||
best practices to provide you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom setup-process">
|
||||
<div class="container">
|
||||
<h2 class="text-center section-sub-title m-b-48 f-s-40 lh-normal">
|
||||
The hassle-free setup process
|
||||
</h2>
|
||||
<div class="row">
|
||||
@for(topcard of setupCards; track topcard.title) {
|
||||
<div class="col-lg-3 col-sm-6 d-flex align-items-stretch">
|
||||
<mat-card class="shadow-none text-center w-100 bg-light-{{
|
||||
topcard.color
|
||||
}} rounded-8 ">
|
||||
<mat-card-content>
|
||||
<div class="m-t-16">
|
||||
@if(topcard.id!==2){
|
||||
<img [src]="topcard.img" alt="users" width="40" class="rounded-circle" />
|
||||
}
|
||||
|
||||
<h6 class="f-s-16 m-t-16">
|
||||
{{ topcard.title }}
|
||||
</h6>
|
||||
<p class="f-s-14 m-t-16 m-b-0">
|
||||
{{ topcard.subtitle }}
|
||||
</p>
|
||||
@if(topcard.id===2){
|
||||
<img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-10 m-b--32" />
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="spacing-top-bottom key-metric">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-5">
|
||||
<div class="m-b-32">
|
||||
<h2 class="f-s-40 m-b-16 section-sub-title f-s-40 lh-normal">Key metric at a glance</h2>
|
||||
<p class="f-s-14 m-0 lh-base">
|
||||
From the year we were founded to the impressive customer base
|
||||
we've built, and the growth percentages that reflect our
|
||||
continuous improvement, these numbers tell our story at a glance.
|
||||
Explore the data that drives our mission and underscores our
|
||||
commitment to excellence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row stat-section">
|
||||
@for (stat of stats; track stat) {
|
||||
<div class="col-6 m-b-32">
|
||||
<div class="stat-block">
|
||||
<p class="stat-label f-s-12 f-w-400 text-uppercase text-primary m-y-0">
|
||||
{{ stat.label }}
|
||||
</p>
|
||||
<h2 class="stat-value f-s-48 lh-normal section-sub-title">
|
||||
{{ stat.value }}
|
||||
</h2>
|
||||
<p class="f-s-14 m-y-0">{{ stat.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-leadership spacing-top p-b-48">
|
||||
<app-image-slider></app-image-slider>
|
||||
</div>
|
||||
|
||||
<div class="features spacing-bottom">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-between">
|
||||
<!--row-->
|
||||
<div class="col-md-5 m-b-30">
|
||||
<div class="client-margin">
|
||||
<h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
|
||||
What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
|
||||
about us?
|
||||
</h2>
|
||||
<p class="m-0">
|
||||
Our users' feedback is a testament to our commitment to quality
|
||||
and user satisfaction. Read what they have to say about their
|
||||
journey with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
|
||||
<mat-card-content>
|
||||
<mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
|
||||
|
||||
<div class="d-flex align-items-center gap-16 m-b-24">
|
||||
<div>
|
||||
<img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
|
||||
</div>
|
||||
|
||||
<p class="f-s-14 m-b-16 m-t-0">
|
||||
Our users' feedback is a testament to our commitment to quality
|
||||
and user satisfaction. Read what they have to say about their
|
||||
journey with us.
|
||||
</p>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="d-flex align-items-center gap-10 m-t-8">
|
||||
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
|
||||
(click)="goPrev()">
|
||||
<i-tabler name="chevron-left"
|
||||
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
|
||||
<span class="f-s-14">{{ displayCount() }}</span>
|
||||
|
||||
<button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
|
||||
(click)="goNext()">
|
||||
<i-tabler name="chevron-right"
|
||||
class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
.contact-page {
|
||||
|
||||
.setup-process {
|
||||
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
padding: 30px 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.key-metric {
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
.cardWithShadow {
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-page {
|
||||
|
||||
.setup-process {
|
||||
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
padding: 30px 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.key-metric {
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
.cardWithShadow {
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AboutUsComponent } from './about-us.component';
|
||||
|
||||
describe('AboutUsComponent', () => {
|
||||
let component: AboutUsComponent;
|
||||
let fixture: ComponentFixture<AboutUsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AboutUsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AboutUsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AboutUsComponent } from './about-us.component';
|
||||
|
||||
describe('AboutUsComponent', () => {
|
||||
let component: AboutUsComponent;
|
||||
let fixture: ComponentFixture<AboutUsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AboutUsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AboutUsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
import { Component, computed, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { ImageSliderComponent } from '../image-slider/image-slider.component';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
//import { PagePricingComponent } from '../page-pricing/page-pricing.component';
|
||||
import {
|
||||
setupCards,
|
||||
stats,
|
||||
users,
|
||||
} from '../front-pagesData';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about-us',
|
||||
imports: [IconModule,MaterialModule ,CommonModule,ImageSliderComponent,FooterComponent,
|
||||
//PagePricingComponent
|
||||
],
|
||||
templateUrl: './about-us.component.html',
|
||||
styleUrl: './about-us.component.scss'
|
||||
})
|
||||
export class AboutUsComponent {
|
||||
setupCards=setupCards;
|
||||
stats = stats;
|
||||
currentIndex = signal(0); // Starting from 0
|
||||
users = users;
|
||||
// Computed values to auto-update template
|
||||
currentUser = computed(() => this.users[this.currentIndex()]);
|
||||
displayCount = computed(
|
||||
() => `${this.currentIndex() + 1}/${this.users.length}`
|
||||
);
|
||||
goPrev() {
|
||||
if (this.currentIndex() > 0) {
|
||||
this.currentIndex.update((i) => i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
goNext() {
|
||||
if (this.currentIndex() < this.users.length - 1) {
|
||||
this.currentIndex.update((i) => i + 1);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
import { Component, computed, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { ImageSliderComponent } from '../image-slider/image-slider.component';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
//import { PagePricingComponent } from '../page-pricing/page-pricing.component';
|
||||
import {
|
||||
setupCards,
|
||||
stats,
|
||||
users,
|
||||
} from '../front-pagesData';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about-us',
|
||||
imports: [IconModule,MaterialModule ,CommonModule,ImageSliderComponent,FooterComponent,
|
||||
//PagePricingComponent
|
||||
],
|
||||
templateUrl: './about-us.component.html',
|
||||
styleUrl: './about-us.component.scss'
|
||||
})
|
||||
export class AboutUsComponent {
|
||||
setupCards=setupCards;
|
||||
stats = stats;
|
||||
currentIndex = signal(0); // Starting from 0
|
||||
users = users;
|
||||
// Computed values to auto-update template
|
||||
currentUser = computed(() => this.users[this.currentIndex()]);
|
||||
displayCount = computed(
|
||||
() => `${this.currentIndex() + 1}/${this.users.length}`
|
||||
);
|
||||
goPrev() {
|
||||
if (this.currentIndex() > 0) {
|
||||
this.currentIndex.update((i) => i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
goNext() {
|
||||
if (this.currentIndex() < this.users.length - 1) {
|
||||
this.currentIndex.update((i) => i + 1);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,116 +1,116 @@
|
||||
<!-- <div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Blog Page
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="blog-details-content spacing-top-bottom">
|
||||
<div class="container">
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
<!-- If Blog is available -->
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
@if(blogDetail()) {
|
||||
<mat-card class="cardWithShadow">
|
||||
<img mat-card-image src="{{ blogDetail()?.imgSrc }}" alt="Photo of a Shiba Inu" height="440" />
|
||||
<div class="detail-card-overlay h-100 d-flex align-items-end justify-content-end">
|
||||
<span class="f-s-12 m-y-16 f-w-600 bg-white rounded-pill p-x-8 m-r-16">2 mins Read</span>
|
||||
</div>
|
||||
<mat-card-content class="p-24 b-b-1">
|
||||
<div class="user-category">
|
||||
<div>
|
||||
<img src="{{ blogDetail()?.user }}" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<span class="f-s-12 m-y-16 f-w-600 rounded-pill p-x-8 p-y-4 d-inline-block text-dark bg-light">{{
|
||||
blogDetail()?.category }}</span>
|
||||
</div>
|
||||
|
||||
<mat-card-title class="f-s-36 lh-normal section-sub-title">{{
|
||||
blogDetail()?.title }}
|
||||
</mat-card-title>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-24 justify-content-between">
|
||||
<div class="d-flex align-items-center gap-24">
|
||||
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="eye" class="icon-18"></i-tabler>{{
|
||||
blogDetail()?.views }}</span>
|
||||
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="message-2"
|
||||
class="icon-18"></i-tabler>4</span>
|
||||
</div>
|
||||
<span class="f-s-14 d-flex align-items-center">
|
||||
<i-tabler name="point" class="icon-18"></i-tabler>
|
||||
{{ blogDetail()?.date }}
|
||||
</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-content class="heading-section">
|
||||
<h2 class="f-s-28 lh-normal m-y-12 section-sub-title">Main Heading & Points</h2>
|
||||
<p class="f-s-14">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
||||
industry's standard dummy text ever since
|
||||
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
|
||||
has survived not only five centuries,
|
||||
but also the leap into electronic typesetting,
|
||||
remaining essentially unchanged. It was popularised in the
|
||||
</p>
|
||||
<ul>
|
||||
<li class="f-s-14">Vivamus eu lacus scelerisque, placerat commodo lectus.</li>
|
||||
<li class="f-s-14">Etiam et ante at ex porta fringilla.</li>
|
||||
<li class="f-s-14">Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus</li>
|
||||
</ul>
|
||||
<p class="f-s-14">
|
||||
Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
|
||||
only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the
|
||||
</p>
|
||||
<mat-divider></mat-divider>
|
||||
<p class="f-s-14">
|
||||
We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
|
||||
helping businesses from new startups
|
||||
</p>
|
||||
<mat-divider></mat-divider>
|
||||
<p class="f-s-14">
|
||||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
|
||||
some form, by injected humour, or randomised words which don't look even slightly believable making this the
|
||||
first true generator on the Internet. It uses a dictionary
|
||||
</p>
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Tags</h2>
|
||||
<ul>
|
||||
<li class="f-s-14">Trends</li>
|
||||
<li class="f-s-14">Design</li>
|
||||
<li class="f-s-14">Research</li>
|
||||
</ul>
|
||||
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Share</h2>
|
||||
<ul class="text-primary">
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Facebook</a></li>
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Twitter</a></li>
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Linkedin</a></li>
|
||||
</ul>
|
||||
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Join our newsletter</h2>
|
||||
<p class="f-s-14">Email address : <a href="javascript:void(0)" class="f-s-14 text-primary text-decoration-none">Subscribe</a></p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
<!-- If Blog isn't available -->
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
|
||||
@if (!blogDetail() || blogDetail().length === 0) {
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<p>No blog post available.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
<!-- <div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Blog Page
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="blog-details-content spacing-top-bottom">
|
||||
<div class="container">
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
<!-- If Blog is available -->
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
@if(blogDetail()) {
|
||||
<mat-card class="cardWithShadow">
|
||||
<img mat-card-image src="{{ blogDetail()?.imgSrc }}" alt="Photo of a Shiba Inu" height="440" />
|
||||
<div class="detail-card-overlay h-100 d-flex align-items-end justify-content-end">
|
||||
<span class="f-s-12 m-y-16 f-w-600 bg-white rounded-pill p-x-8 m-r-16">2 mins Read</span>
|
||||
</div>
|
||||
<mat-card-content class="p-24 b-b-1">
|
||||
<div class="user-category">
|
||||
<div>
|
||||
<img src="{{ blogDetail()?.user }}" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<span class="f-s-12 m-y-16 f-w-600 rounded-pill p-x-8 p-y-4 d-inline-block text-dark bg-light">{{
|
||||
blogDetail()?.category }}</span>
|
||||
</div>
|
||||
|
||||
<mat-card-title class="f-s-36 lh-normal section-sub-title">{{
|
||||
blogDetail()?.title }}
|
||||
</mat-card-title>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-24 justify-content-between">
|
||||
<div class="d-flex align-items-center gap-24">
|
||||
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="eye" class="icon-18"></i-tabler>{{
|
||||
blogDetail()?.views }}</span>
|
||||
<span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="message-2"
|
||||
class="icon-18"></i-tabler>4</span>
|
||||
</div>
|
||||
<span class="f-s-14 d-flex align-items-center">
|
||||
<i-tabler name="point" class="icon-18"></i-tabler>
|
||||
{{ blogDetail()?.date }}
|
||||
</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-content class="heading-section">
|
||||
<h2 class="f-s-28 lh-normal m-y-12 section-sub-title">Main Heading & Points</h2>
|
||||
<p class="f-s-14">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
||||
industry's standard dummy text ever since
|
||||
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
|
||||
has survived not only five centuries,
|
||||
but also the leap into electronic typesetting,
|
||||
remaining essentially unchanged. It was popularised in the
|
||||
</p>
|
||||
<ul>
|
||||
<li class="f-s-14">Vivamus eu lacus scelerisque, placerat commodo lectus.</li>
|
||||
<li class="f-s-14">Etiam et ante at ex porta fringilla.</li>
|
||||
<li class="f-s-14">Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus</li>
|
||||
</ul>
|
||||
<p class="f-s-14">
|
||||
Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
|
||||
only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
|
||||
popularised in the
|
||||
</p>
|
||||
<mat-divider></mat-divider>
|
||||
<p class="f-s-14">
|
||||
We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
|
||||
helping businesses from new startups
|
||||
</p>
|
||||
<mat-divider></mat-divider>
|
||||
<p class="f-s-14">
|
||||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
|
||||
some form, by injected humour, or randomised words which don't look even slightly believable making this the
|
||||
first true generator on the Internet. It uses a dictionary
|
||||
</p>
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Tags</h2>
|
||||
<ul>
|
||||
<li class="f-s-14">Trends</li>
|
||||
<li class="f-s-14">Design</li>
|
||||
<li class="f-s-14">Research</li>
|
||||
</ul>
|
||||
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Share</h2>
|
||||
<ul class="text-primary">
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Facebook</a></li>
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Twitter</a></li>
|
||||
<li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Linkedin</a></li>
|
||||
</ul>
|
||||
|
||||
<mat-divider class="m-b-16"></mat-divider>
|
||||
<h2 class="f-s-21 lh-normal">Join our newsletter</h2>
|
||||
<p class="f-s-14">Email address : <a href="javascript:void(0)" class="f-s-14 text-primary text-decoration-none">Subscribe</a></p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
<!-- If Blog isn't available -->
|
||||
<!-- ----------------------------------------------------------------- -->
|
||||
|
||||
@if (!blogDetail() || blogDetail().length === 0) {
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<p>No blog post available.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BlogDetailsComponent } from './blog-details.component';
|
||||
|
||||
describe('BlogDetailsComponent', () => {
|
||||
let component: BlogDetailsComponent;
|
||||
let fixture: ComponentFixture<BlogDetailsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BlogDetailsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BlogDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BlogDetailsComponent } from './blog-details.component';
|
||||
|
||||
describe('BlogDetailsComponent', () => {
|
||||
let component: BlogDetailsComponent;
|
||||
let fixture: ComponentFixture<BlogDetailsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BlogDetailsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BlogDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, inject, OnInit, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog-details',
|
||||
imports: [IconModule, MaterialModule, CommonModule,
|
||||
FooterComponent
|
||||
],
|
||||
templateUrl: './blog-details.component.html',
|
||||
styleUrl: './blog-details.component.scss'
|
||||
})
|
||||
export class BlogDetailsComponent implements OnInit {
|
||||
blogDetail = signal<any>(null);
|
||||
private frontendService = inject(FrontEndService);
|
||||
ngOnInit(): void {
|
||||
const selected = this.frontendService.getBlog()();
|
||||
|
||||
if (selected) {
|
||||
this.blogDetail.set(selected);
|
||||
} else {
|
||||
// Fallback if accessed directly (e.g., from sidebar or refresh)
|
||||
const defaultBlog = {
|
||||
id: 1,
|
||||
time: "2 mins Read",
|
||||
imgSrc: "/assets/images/blog/blog-img1.jpg",
|
||||
user: "/assets/images/profile/user-1.jpg",
|
||||
title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
|
||||
views: "9,125",
|
||||
category: "Social",
|
||||
comments: 3,
|
||||
date: "Mon, Dec 23"
|
||||
};
|
||||
this.blogDetail.set(defaultBlog);
|
||||
}
|
||||
}
|
||||
}
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, inject, OnInit, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog-details',
|
||||
imports: [IconModule, MaterialModule, CommonModule,
|
||||
FooterComponent
|
||||
],
|
||||
templateUrl: './blog-details.component.html',
|
||||
styleUrl: './blog-details.component.scss'
|
||||
})
|
||||
export class BlogDetailsComponent implements OnInit {
|
||||
blogDetail = signal<any>(null);
|
||||
private frontendService = inject(FrontEndService);
|
||||
ngOnInit(): void {
|
||||
const selected = this.frontendService.getBlog()();
|
||||
|
||||
if (selected) {
|
||||
this.blogDetail.set(selected);
|
||||
} else {
|
||||
// Fallback if accessed directly (e.g., from sidebar or refresh)
|
||||
const defaultBlog = {
|
||||
id: 1,
|
||||
time: "2 mins Read",
|
||||
imgSrc: "/assets/images/blog/blog-img1.jpg",
|
||||
user: "/assets/images/profile/user-1.jpg",
|
||||
title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
|
||||
views: "9,125",
|
||||
category: "Social",
|
||||
comments: 3,
|
||||
date: "Mon, Dec 23"
|
||||
};
|
||||
this.blogDetail.set(defaultBlog);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Blog
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Blog & Diskusia</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@for(cardimg of cardimgs; track cardimg.imgSrc) {
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="cardWithShadow card2 position-relative card-hover cursor-pointer" (click)="getNavigate(cardimg)">
|
||||
<img mat-card-image src="{{ cardimg.imgSrc }}" alt="Photo of a Shiba Inu" />
|
||||
<div class="card-overlay h-100 d-flex align-items-end justify-content-end">
|
||||
<mat-chip class="m-r-16 bg-white">{{
|
||||
cardimg.time
|
||||
}}</mat-chip>
|
||||
</div>
|
||||
|
||||
<mat-card-content class="p-y-24">
|
||||
<div class="user-category">
|
||||
<div>
|
||||
<img src="{{ cardimg.user }}" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<mat-chip class="m-y-16 bg-light">{{
|
||||
cardimg.category
|
||||
}}</mat-chip>
|
||||
</div>
|
||||
<mat-card-title>{{ cardimg.title }}</mat-card-title>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-24">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="m-r-12 f-s-14 d-flex align-items-center"><i-tabler name="eye"
|
||||
class="icon-18 m-r-4"></i-tabler>{{ cardimg.views }}</span>
|
||||
<span class="f-s-14 d-flex align-items-center"><i-tabler name="message-2"
|
||||
class="icon-18 m-r-4"></i-tabler>{{ cardimg.comments }}</span>
|
||||
</div>
|
||||
<span class="m-l-auto f-s-14 d-flex align-items-center">
|
||||
<i-tabler name="point" class="icon-14 m-r-4 d-flex"></i-tabler>
|
||||
{{ cardimg.date }}
|
||||
</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Blog
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Blog & Diskusia</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@for(cardimg of cardimgs; track cardimg.imgSrc) {
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="cardWithShadow card2 position-relative card-hover cursor-pointer" (click)="getNavigate(cardimg)">
|
||||
<img mat-card-image src="{{ cardimg.imgSrc }}" alt="Photo of a Shiba Inu" />
|
||||
<div class="card-overlay h-100 d-flex align-items-end justify-content-end">
|
||||
<mat-chip class="m-r-16 bg-white">{{
|
||||
cardimg.time
|
||||
}}</mat-chip>
|
||||
</div>
|
||||
|
||||
<mat-card-content class="p-y-24">
|
||||
<div class="user-category">
|
||||
<div>
|
||||
<img src="{{ cardimg.user }}" class="rounded-circle" width="40" />
|
||||
</div>
|
||||
<mat-chip class="m-y-16 bg-light">{{
|
||||
cardimg.category
|
||||
}}</mat-chip>
|
||||
</div>
|
||||
<mat-card-title>{{ cardimg.title }}</mat-card-title>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-24">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="m-r-12 f-s-14 d-flex align-items-center"><i-tabler name="eye"
|
||||
class="icon-18 m-r-4"></i-tabler>{{ cardimg.views }}</span>
|
||||
<span class="f-s-14 d-flex align-items-center"><i-tabler name="message-2"
|
||||
class="icon-18 m-r-4"></i-tabler>{{ cardimg.comments }}</span>
|
||||
</div>
|
||||
<span class="m-l-auto f-s-14 d-flex align-items-center">
|
||||
<i-tabler name="point" class="icon-14 m-r-4 d-flex"></i-tabler>
|
||||
{{ cardimg.date }}
|
||||
</span>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
@@ -1,24 +1,24 @@
|
||||
|
||||
|
||||
.social-btns {
|
||||
margin-top: 20px;
|
||||
|
||||
.btn-icon {
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
tabler-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-story {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.social-btns {
|
||||
margin-top: 20px;
|
||||
|
||||
.btn-icon {
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
tabler-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-story {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BlogComponent } from './blog.component';
|
||||
|
||||
describe('BlogComponent', () => {
|
||||
let component: BlogComponent;
|
||||
let fixture: ComponentFixture<BlogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BlogComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BlogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BlogComponent } from './blog.component';
|
||||
|
||||
describe('BlogComponent', () => {
|
||||
let component: BlogComponent;
|
||||
let fixture: ComponentFixture<BlogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BlogComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BlogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { cardimgs } from '../front-pagesData';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { Router } from '@angular/router';
|
||||
import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog',
|
||||
imports: [IconModule, MaterialModule, FooterComponent,],
|
||||
templateUrl: './blog.component.html',
|
||||
styleUrl: './blog.component.scss'
|
||||
})
|
||||
export class BlogComponent implements OnInit {
|
||||
|
||||
private router = inject(Router);
|
||||
private frontendService = inject(FrontEndService);
|
||||
cardimgs = cardimgs;
|
||||
|
||||
ngOnInit() {
|
||||
console.log(cardimgs, 'cardimgs');
|
||||
}
|
||||
|
||||
getNavigate(cardimg: any) {
|
||||
console.log('cardimg--->', cardimg);
|
||||
this.frontendService.setBlog(cardimg);
|
||||
this.router.navigate(['front-pages/blog-details'])
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { cardimgs } from '../front-pagesData';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { Router } from '@angular/router';
|
||||
import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog',
|
||||
imports: [IconModule, MaterialModule, FooterComponent,],
|
||||
templateUrl: './blog.component.html',
|
||||
styleUrl: './blog.component.scss'
|
||||
})
|
||||
export class BlogComponent implements OnInit {
|
||||
|
||||
private router = inject(Router);
|
||||
private frontendService = inject(FrontEndService);
|
||||
cardimgs = cardimgs;
|
||||
|
||||
ngOnInit() {
|
||||
console.log(cardimgs, 'cardimgs');
|
||||
}
|
||||
|
||||
getNavigate(cardimg: any) {
|
||||
console.log('cardimg--->', cardimg);
|
||||
this.frontendService.setBlog(cardimg);
|
||||
this.router.navigate(['front-pages/blog-details'])
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<div class="contact-content">
|
||||
<!-- Light Blue Section -->
|
||||
<div class="banner-section bg-light-primary p-y-80">
|
||||
<div class="container m-b-80 p-b-80">
|
||||
<div class="container-content">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0"> Chceme sa dozvedieť viac do vás</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Kontaktujte nás
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<form>
|
||||
<div class="container">
|
||||
<!-- Map stays inside, but will visually float out -->
|
||||
<div class="map-container overflow-hidden rounded">
|
||||
<iframe class="overflow-hidden rounded"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6335071.017601874!2d7.472741070779207!3d34.000243243063756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x126c2c82aeb63e77%3A0xb5b3d1a2f1304c8e!2sTunisia!5e0!3m2!1sen!2stn!4v1715499362503!5m2!1sen!2stn"
|
||||
width="100%" height="400" style="border: 0" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="row">
|
||||
<div class="col-md-8 m-b-30">
|
||||
<div class="row ">
|
||||
<div class="col-md-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Meno<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="text" placeholder="Meno" />
|
||||
</mat-form-field>
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Telefónne číslo<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="tel" placeholder="xxxx xxx xxxx" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Priezvisko<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="text" placeholder="Priezvisko" />
|
||||
</mat-form-field>
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Email<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="mail" placeholder="Emailová adresa" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Dopyt týkajúci sa<span>*</span>
|
||||
</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select value="General Enquiry">
|
||||
<mat-option value="General Enquiry">Všeobecný dopyt</mat-option>
|
||||
<mat-option value="Registration Enquiry">Žiadosť o registráciu</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Správa</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<textarea matInput rows="5" placeholder="Napíšte svoju správu sem"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-flat-button>Odoslať</button>
|
||||
</div>
|
||||
<div class="col-md-4 right-side-content">
|
||||
<mat-card class="shadow-none bg-primary rounded-8 p-8">
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<h6 class="f-s-20 m-b-16 text-white">Kontaktujte nás dnes</h6>
|
||||
<p class="f-s-14 m-0 text-white">
|
||||
Máte otázky alebo potrebujete pomoc? Napíšte nám správu.
|
||||
</p>
|
||||
</div>
|
||||
<mat-divider class="m-y-30"></mat-divider>
|
||||
<div>
|
||||
<h6 class="f-s-20 m-b-16 text-white">Naša lokalita</h6>
|
||||
<p class="f-s-14 m-0 text-white">
|
||||
Navštívte nás osobne alebo nájdite naše kontaktné údaje, aby ste sa s nami mohli priamo spojiť.
|
||||
</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<!-- Light Blue Section -->
|
||||
<div class="banner-section bg-light-primary p-y-80">
|
||||
<div class="container m-b-80 p-b-80">
|
||||
<div class="container-content">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0"> Chceme sa dozvedieť viac do vás</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Kontaktujte nás
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<form>
|
||||
<div class="container">
|
||||
<!-- Map stays inside, but will visually float out -->
|
||||
<div class="map-container overflow-hidden rounded">
|
||||
<iframe class="overflow-hidden rounded"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6335071.017601874!2d7.472741070779207!3d34.000243243063756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x126c2c82aeb63e77%3A0xb5b3d1a2f1304c8e!2sTunisia!5e0!3m2!1sen!2stn!4v1715499362503!5m2!1sen!2stn"
|
||||
width="100%" height="400" style="border: 0" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="row">
|
||||
<div class="col-md-8 m-b-30">
|
||||
<div class="row ">
|
||||
<div class="col-md-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Meno<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="text" placeholder="Meno" />
|
||||
</mat-form-field>
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Telefónne číslo<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="tel" placeholder="xxxx xxx xxxx" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Priezvisko<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="text" placeholder="Priezvisko" />
|
||||
</mat-form-field>
|
||||
<!-- input -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Email<span>*</span></mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="mail" placeholder="Emailová adresa" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Dopyt týkajúci sa<span>*</span>
|
||||
</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select value="General Enquiry">
|
||||
<mat-option value="General Enquiry">Všeobecný dopyt</mat-option>
|
||||
<mat-option value="Registration Enquiry">Žiadosť o registráciu</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-8 d-block">Správa</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<textarea matInput rows="5" placeholder="Napíšte svoju správu sem"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-flat-button>Odoslať</button>
|
||||
</div>
|
||||
<div class="col-md-4 right-side-content">
|
||||
<mat-card class="shadow-none bg-primary rounded-8 p-8">
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<h6 class="f-s-20 m-b-16 text-white">Kontaktujte nás dnes</h6>
|
||||
<p class="f-s-14 m-0 text-white">
|
||||
Máte otázky alebo potrebujete pomoc? Napíšte nám správu.
|
||||
</p>
|
||||
</div>
|
||||
<mat-divider class="m-y-30"></mat-divider>
|
||||
<div>
|
||||
<h6 class="f-s-20 m-b-16 text-white">Naša lokalita</h6>
|
||||
<p class="f-s-14 m-0 text-white">
|
||||
Navštívte nás osobne alebo nájdite naše kontaktné údaje, aby ste sa s nami mohli priamo spojiť.
|
||||
</p>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +1,3 @@
|
||||
.map-container{
|
||||
margin-top: -200px;
|
||||
.map-container{
|
||||
margin-top: -200px;
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ContactComponent } from './contact.component';
|
||||
|
||||
describe('ContactComponent', () => {
|
||||
let component: ContactComponent;
|
||||
let fixture: ComponentFixture<ContactComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ContactComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ContactComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ContactComponent } from './contact.component';
|
||||
|
||||
describe('ContactComponent', () => {
|
||||
let component: ContactComponent;
|
||||
let fixture: ComponentFixture<ContactComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ContactComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ContactComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
imports: [MaterialModule,IconModule,FooterComponent],
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrl: './contact.component.scss'
|
||||
})
|
||||
export class ContactComponent {
|
||||
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
imports: [MaterialModule,IconModule,FooterComponent],
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrl: './contact.component.scss'
|
||||
})
|
||||
export class ContactComponent {
|
||||
|
||||
}
|
||||
|
||||
@@ -1,87 +1,87 @@
|
||||
<div class="footer-content">
|
||||
<div class="footer-wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Applications</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of applicationsItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Forms</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of formsItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Tables</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of tablesItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Sledujte nás:</h5>
|
||||
<div class="d-flex align-items-center gap-20">
|
||||
@for (icon of socialIcons; track icon.src) {
|
||||
<img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
|
||||
class="cursor-pointer" />
|
||||
}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between p-y-30 b-t-1 flex-wrap">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Sledujte nás:</h5>
|
||||
<div class="d-flex align-items-center gap-20">
|
||||
@for (icon of socialIcons; track icon.src) {
|
||||
<img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
|
||||
class="cursor-pointer" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="/assets/images/logos/logo-nextgen.png" class="img-fluid" style="max-width: 100%; height: auto;" />
|
||||
</div>
|
||||
<div class="col-md-4 content-start">
|
||||
<img src="/assets/images/logos/POO_logo_modre.png" class="img-fluid"
|
||||
style="max-width: 100%; height: auto;" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Left side -->
|
||||
<!-- <div class="d-flex align-items-center gap-4">
|
||||
<img src="assets/images/landingpage/favicon.png" alt="logo" width="20" height="15" />
|
||||
<h6 class="f-s-16 f-w-500">All rights reserved by Modernize.</h6>
|
||||
</div> -->
|
||||
|
||||
<!-- Right side -->
|
||||
<!-- <div class="d-flex justify-content-end align-items-center">
|
||||
<p class="f-s-16 m-0">
|
||||
Designed & Developed by
|
||||
<a href="https://adminmart.com/" target="_blank" class="text-decoration-none text-primary">
|
||||
AdminMart </a>.
|
||||
</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="footer-wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Applications</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of applicationsItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Forms</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of formsItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<div class="listContainer">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Tables</h5>
|
||||
<mat-list role="list" class="p-y-0">
|
||||
@for (item of tablesItems; track item) {
|
||||
<a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="col-md-3 col-6 m-b-30">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Sledujte nás:</h5>
|
||||
<div class="d-flex align-items-center gap-20">
|
||||
@for (icon of socialIcons; track icon.src) {
|
||||
<img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
|
||||
class="cursor-pointer" />
|
||||
}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between p-y-30 b-t-1 flex-wrap">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5 class="f-s-16 f-w-600 m-b-30">Sledujte nás:</h5>
|
||||
<div class="d-flex align-items-center gap-20">
|
||||
@for (icon of socialIcons; track icon.src) {
|
||||
<img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
|
||||
class="cursor-pointer" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="/assets/images/logos/logo-nextgen.png" class="img-fluid" style="max-width: 100%; height: auto;" />
|
||||
</div>
|
||||
<div class="col-md-4 content-start">
|
||||
<img src="/assets/images/logos/POO_logo_modre.png" class="img-fluid"
|
||||
style="max-width: 100%; height: auto;" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Left side -->
|
||||
<!-- <div class="d-flex align-items-center gap-4">
|
||||
<img src="assets/images/landingpage/favicon.png" alt="logo" width="20" height="15" />
|
||||
<h6 class="f-s-16 f-w-500">All rights reserved by Modernize.</h6>
|
||||
</div> -->
|
||||
|
||||
<!-- Right side -->
|
||||
<!-- <div class="d-flex justify-content-end align-items-center">
|
||||
<p class="f-s-16 m-0">
|
||||
Designed & Developed by
|
||||
<a href="https://adminmart.com/" target="_blank" class="text-decoration-none text-primary">
|
||||
AdminMart </a>.
|
||||
</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,13 +1,13 @@
|
||||
|
||||
.footer-content{
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgStyleDash {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.footer-content{
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgStyleDash {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FooterComponent } from './footer.component';
|
||||
|
||||
describe('FooterComponent', () => {
|
||||
let component: FooterComponent;
|
||||
let fixture: ComponentFixture<FooterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [FooterComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(FooterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FooterComponent } from './footer.component';
|
||||
|
||||
describe('FooterComponent', () => {
|
||||
let component: FooterComponent;
|
||||
let fixture: ComponentFixture<FooterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [FooterComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(FooterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,95 +1,94 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
imports: [MaterialModule, IconModule, RouterLink],
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrl: './footer.component.scss'
|
||||
})
|
||||
export class FooterComponent {
|
||||
applicationsItems = [
|
||||
{
|
||||
title: 'Kanban',
|
||||
href: "/apps/kanban"
|
||||
},
|
||||
{
|
||||
title: 'Invoice List',
|
||||
href: "/apps/invoice/list"
|
||||
},
|
||||
{
|
||||
title: 'eCommerce',
|
||||
href: "/apps/product/shop"
|
||||
},
|
||||
{
|
||||
title: 'Chats',
|
||||
href: "/apps/chat"
|
||||
},
|
||||
{
|
||||
title: 'Tickets',
|
||||
href: "/apps/tickets"
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
href: "/apps/blog/post"
|
||||
},
|
||||
];
|
||||
|
||||
formsItems = [
|
||||
{
|
||||
title: 'Form Layout',
|
||||
href: "/forms/form-layouts"
|
||||
},
|
||||
{
|
||||
title: 'Form Horizontal',
|
||||
href: "/forms/form-horizontal"
|
||||
},
|
||||
{
|
||||
title: 'Form Wizard',
|
||||
href: "/forms/form-wizard"
|
||||
},
|
||||
{
|
||||
title: 'Form Vertical',
|
||||
href: "/forms/form-vertical"
|
||||
},
|
||||
{
|
||||
title: 'Form Toastr',
|
||||
href: "/forms/form-toastr"
|
||||
},
|
||||
];
|
||||
|
||||
tablesItems = [
|
||||
{
|
||||
title: 'Basic Table',
|
||||
href: "/tables/basic-table"
|
||||
},
|
||||
{
|
||||
title: 'Multi Header Footer Table',
|
||||
href: "/tables/multi-header-footer-table"
|
||||
},
|
||||
{
|
||||
title: 'Pagination Table',
|
||||
href: "/tables/pagination-table"
|
||||
},
|
||||
{
|
||||
title: 'Dynamic Table',
|
||||
href: "/tables/dynamic-table"
|
||||
},
|
||||
{
|
||||
title: 'HTTP Table',
|
||||
href: "/tables/http-table"
|
||||
},
|
||||
{
|
||||
title: 'Sortable Table',
|
||||
href: "/tables/sortable-table"
|
||||
},
|
||||
];
|
||||
|
||||
socialIcons = [
|
||||
{ src: 'assets/images/front-pages/icon-facebook.svg', tooltip: 'Facebook' },
|
||||
{ src: 'assets/images/front-pages/icon-twitter.svg', tooltip: 'Twitter' },
|
||||
{ src: 'assets/images/front-pages/icon-instagram.svg', tooltip: 'Instagram' },
|
||||
];
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
imports: [MaterialModule, IconModule],
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrl: './footer.component.scss'
|
||||
})
|
||||
export class FooterComponent {
|
||||
applicationsItems = [
|
||||
{
|
||||
title: 'Kanban',
|
||||
href: "/apps/kanban"
|
||||
},
|
||||
{
|
||||
title: 'Invoice List',
|
||||
href: "/apps/invoice/list"
|
||||
},
|
||||
{
|
||||
title: 'eCommerce',
|
||||
href: "/apps/product/shop"
|
||||
},
|
||||
{
|
||||
title: 'Chats',
|
||||
href: "/apps/chat"
|
||||
},
|
||||
{
|
||||
title: 'Tickets',
|
||||
href: "/apps/tickets"
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
href: "/apps/blog/post"
|
||||
},
|
||||
];
|
||||
|
||||
formsItems = [
|
||||
{
|
||||
title: 'Form Layout',
|
||||
href: "/forms/form-layouts"
|
||||
},
|
||||
{
|
||||
title: 'Form Horizontal',
|
||||
href: "/forms/form-horizontal"
|
||||
},
|
||||
{
|
||||
title: 'Form Wizard',
|
||||
href: "/forms/form-wizard"
|
||||
},
|
||||
{
|
||||
title: 'Form Vertical',
|
||||
href: "/forms/form-vertical"
|
||||
},
|
||||
{
|
||||
title: 'Form Toastr',
|
||||
href: "/forms/form-toastr"
|
||||
},
|
||||
];
|
||||
|
||||
tablesItems = [
|
||||
{
|
||||
title: 'Basic Table',
|
||||
href: "/tables/basic-table"
|
||||
},
|
||||
{
|
||||
title: 'Multi Header Footer Table',
|
||||
href: "/tables/multi-header-footer-table"
|
||||
},
|
||||
{
|
||||
title: 'Pagination Table',
|
||||
href: "/tables/pagination-table"
|
||||
},
|
||||
{
|
||||
title: 'Dynamic Table',
|
||||
href: "/tables/dynamic-table"
|
||||
},
|
||||
{
|
||||
title: 'HTTP Table',
|
||||
href: "/tables/http-table"
|
||||
},
|
||||
{
|
||||
title: 'Sortable Table',
|
||||
href: "/tables/sortable-table"
|
||||
},
|
||||
];
|
||||
|
||||
socialIcons = [
|
||||
{ src: 'assets/images/front-pages/icon-facebook.svg', tooltip: 'Facebook' },
|
||||
{ src: 'assets/images/front-pages/icon-twitter.svg', tooltip: 'Twitter' },
|
||||
{ src: 'assets/images/front-pages/icon-instagram.svg', tooltip: 'Instagram' },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { HomepageComponent } from './homepage/homepage.component';
|
||||
import { AboutUsComponent } from './about-us/about-us.component';
|
||||
import { HomepageDetailsComponent } from './homepage-details/homepage-details.component';
|
||||
import { BlogComponent } from './blog/blog.component';
|
||||
import { PortfolioComponent } from './portfolio/portfolio.component';
|
||||
import { PricingComponent } from './pricing/pricing.component';
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
import { BlogDetailsComponent } from './blog-details/blog-details.component';
|
||||
|
||||
|
||||
export const FrontPagesRoutes: Routes = [
|
||||
|
||||
{
|
||||
path: '',
|
||||
component: HomepageComponent, // acts as layout shell
|
||||
children: [
|
||||
{ path: '', redirectTo: 'homepage', pathMatch: 'full' },
|
||||
{ path: 'homepage', component: HomepageDetailsComponent }, // real homepage content
|
||||
{ path: 'about', component: AboutUsComponent },
|
||||
{path:'blog',component:BlogComponent },
|
||||
{ path: 'portfolio', component: PortfolioComponent },
|
||||
{ path: 'pricing', component: PricingComponent },
|
||||
{ path: 'contact', component: ContactComponent },
|
||||
{ path: 'blog-details', component: BlogDetailsComponent },
|
||||
],
|
||||
},
|
||||
import { Routes } from '@angular/router';
|
||||
import { HomepageComponent } from './homepage/homepage.component';
|
||||
import { AboutUsComponent } from './about-us/about-us.component';
|
||||
import { HomepageDetailsComponent } from './homepage-details/homepage-details.component';
|
||||
import { BlogComponent } from './blog/blog.component';
|
||||
import { PortfolioComponent } from './portfolio/portfolio.component';
|
||||
import { PricingComponent } from './pricing/pricing.component';
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
import { BlogDetailsComponent } from './blog-details/blog-details.component';
|
||||
|
||||
|
||||
export const FrontPagesRoutes: Routes = [
|
||||
|
||||
{
|
||||
path: '',
|
||||
component: HomepageComponent, // acts as layout shell
|
||||
children: [
|
||||
{ path: '', redirectTo: 'homepage', pathMatch: 'full' },
|
||||
{ path: 'homepage', component: HomepageDetailsComponent }, // real homepage content
|
||||
{ path: 'about', component: AboutUsComponent },
|
||||
{path:'blog',component:BlogComponent },
|
||||
{ path: 'portfolio', component: PortfolioComponent },
|
||||
{ path: 'pricing', component: PricingComponent },
|
||||
{ path: 'contact', component: ContactComponent },
|
||||
{ path: 'blog-details', component: BlogDetailsComponent },
|
||||
],
|
||||
},
|
||||
];
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,189 +1,189 @@
|
||||
.home-page {
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.home-page-header {
|
||||
|
||||
.header-container-content {
|
||||
|
||||
.cardPosition {
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.cardPositionTwo {
|
||||
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
.play-button {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--mat-sys-primary); // or use your theme color
|
||||
color: var(--mat-sys-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.textSee {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboardCards {
|
||||
|
||||
.card-container {
|
||||
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
|
||||
.profileTabs {
|
||||
background-color: var(--mdc-elevated-card-container-color) !important;
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active {
|
||||
.mdc-tab__text-label {
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-slider {
|
||||
.template-slider-content {
|
||||
.demo-slider {
|
||||
.demo-slide {
|
||||
animation: slide3d 15s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
.cardWithShadow {
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exceptional {
|
||||
.exceptional-content {
|
||||
.demo-slider {
|
||||
.demo-slide {
|
||||
animation: slide3d 20s linear infinite;
|
||||
}
|
||||
|
||||
.demo-slide-two {
|
||||
animation: slide3dTwo 20s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 1px solid var(--mat-sys-outline);
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
padding: 18px 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sliderImg {
|
||||
max-width: 380px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.img-border {
|
||||
border: 2px solid var(--mat-sys-secondary);
|
||||
/* Blue border, change color as needed */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img-border:hover {
|
||||
border-color: var(--mat-sys-secondary);
|
||||
}
|
||||
|
||||
.border-dash {
|
||||
border: 1px dashed var(--mat-sys-outline); // Initial border color (Bootstrap primary)
|
||||
transition: border-color 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--mat-sys-primary); // Use your Angular Material primary variable or a custom color
|
||||
}
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel {
|
||||
border-radius: 8px !important;
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
padding: 20px 21px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatUpDown {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-6px); // smaller bounce
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide3d {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(-2028px, 0, 0); // adjust based on actual slide width
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide3dTwo {
|
||||
from {
|
||||
transform: translate3d(-2028px, 0, 0); // Rightward (starts left)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.home-page-header {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
.home-page {
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.home-page-header {
|
||||
|
||||
.header-container-content {
|
||||
|
||||
.cardPosition {
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.cardPositionTwo {
|
||||
|
||||
.float-image {
|
||||
animation: floatUpDown 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
.play-button {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--mat-sys-primary); // or use your theme color
|
||||
color: var(--mat-sys-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.textSee {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboardCards {
|
||||
|
||||
.card-container {
|
||||
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
|
||||
.profileTabs {
|
||||
background-color: var(--mdc-elevated-card-container-color) !important;
|
||||
|
||||
.mat-mdc-tab.mdc-tab-indicator--active {
|
||||
.mdc-tab__text-label {
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-slider {
|
||||
.template-slider-content {
|
||||
.demo-slider {
|
||||
.demo-slide {
|
||||
animation: slide3d 15s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
|
||||
.cardWithShadow {
|
||||
mat-card-content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exceptional {
|
||||
.exceptional-content {
|
||||
.demo-slider {
|
||||
.demo-slide {
|
||||
animation: slide3d 20s linear infinite;
|
||||
}
|
||||
|
||||
.demo-slide-two {
|
||||
animation: slide3dTwo 20s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 1px solid var(--mat-sys-outline);
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
padding: 18px 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sliderImg {
|
||||
max-width: 380px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.img-border {
|
||||
border: 2px solid var(--mat-sys-secondary);
|
||||
/* Blue border, change color as needed */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.img-border:hover {
|
||||
border-color: var(--mat-sys-secondary);
|
||||
}
|
||||
|
||||
.border-dash {
|
||||
border: 1px dashed var(--mat-sys-outline); // Initial border color (Bootstrap primary)
|
||||
transition: border-color 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--mat-sys-primary); // Use your Angular Material primary variable or a custom color
|
||||
}
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
.mat-expansion-panel {
|
||||
border-radius: 8px !important;
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
padding: 20px 21px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatUpDown {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-6px); // smaller bounce
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide3d {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(-2028px, 0, 0); // adjust based on actual slide width
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide3dTwo {
|
||||
from {
|
||||
transform: translate3d(-2028px, 0, 0); // Rightward (starts left)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.home-page-header {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomepageDetailsComponent } from './homepage-details.component';
|
||||
|
||||
describe('HomepageDetailsComponent', () => {
|
||||
let component: HomepageDetailsComponent;
|
||||
let fixture: ComponentFixture<HomepageDetailsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [HomepageDetailsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomepageDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomepageDetailsComponent } from './homepage-details.component';
|
||||
|
||||
describe('HomepageDetailsComponent', () => {
|
||||
let component: HomepageDetailsComponent;
|
||||
let fixture: ComponentFixture<HomepageDetailsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [HomepageDetailsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomepageDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,131 +1,131 @@
|
||||
import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import {
|
||||
faqList,
|
||||
followercardsFirst,
|
||||
followercardSecond,
|
||||
followercardThird,
|
||||
frameworks,
|
||||
tiles,
|
||||
users,
|
||||
topcardsGrid,
|
||||
} from '../front-pagesData';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { ImageSliderComponent } from '../image-slider/image-slider.component';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { TemplateVideoComponent } from '../template-video/template-video.component';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage-details',
|
||||
imports: [
|
||||
MaterialModule,
|
||||
IconModule,
|
||||
CommonModule,
|
||||
ImageSliderComponent,
|
||||
FooterComponent,
|
||||
RouterModule
|
||||
],
|
||||
templateUrl: './homepage-details.component.html',
|
||||
styleUrl: './homepage-details.component.scss',
|
||||
})
|
||||
export class HomepageDetailsComponent {
|
||||
|
||||
topcards=topcardsGrid;
|
||||
|
||||
|
||||
centered = false;
|
||||
disabled = false;
|
||||
unbounded = false;
|
||||
radius: number;
|
||||
color: string;
|
||||
showBackground: boolean = false;
|
||||
frameworks = frameworks;
|
||||
selectedIndex = 1;
|
||||
|
||||
readonly dialog = inject(MatDialog);
|
||||
private router = inject(Router);
|
||||
private destroyRef = inject(DestroyRef); // ✅ For automatic cleanup
|
||||
private mediaMatcher = inject(MediaMatcher); // ✅ Proper MediaMatcher injection
|
||||
|
||||
mobileQuery: MediaQueryList;
|
||||
isMobileView = false;
|
||||
|
||||
readonly panelOpenState = signal(false);
|
||||
tiles = tiles;
|
||||
hideCloserBtn: boolean = true;
|
||||
users = users;
|
||||
expandedIndex: number | null = null;
|
||||
currentIndex = signal(0); // Starting from 0
|
||||
faqList = faqList;
|
||||
selectedPath: string | null = null;
|
||||
clicked = false;
|
||||
|
||||
followercardsfirst = followercardsFirst;
|
||||
followercardsecond = followercardSecond;
|
||||
followercardthird = followercardThird;
|
||||
|
||||
currentUser = computed(() => this.users[this.currentIndex()]);
|
||||
displayCount = computed(() => `${this.currentIndex() + 1}/${this.users.length}`);
|
||||
|
||||
constructor() {
|
||||
const isSmallScreen = this.mediaMatcher.matchMedia('(max-width: 599px)');
|
||||
// ✅ Setup media query for max-width: 1199px
|
||||
this.mobileQuery = this.mediaMatcher.matchMedia('(max-width: 1199px)');
|
||||
this.isMobileView = this.mobileQuery.matches;
|
||||
|
||||
const listener = (e: MediaQueryListEvent) => {
|
||||
this.isMobileView = e.matches;
|
||||
};
|
||||
|
||||
// ✅ Listen to viewport changes
|
||||
this.mobileQuery.addEventListener('change', listener);
|
||||
|
||||
// ✅ Clean up listener on component destroy
|
||||
this.destroyRef.onDestroy(() => {
|
||||
this.mobileQuery.removeEventListener('change', listener);
|
||||
});
|
||||
}
|
||||
isOver(): boolean {
|
||||
return this.mediaMatcher.matchMedia('(max-width: 1199px)').matches;
|
||||
}
|
||||
|
||||
goPrev() {
|
||||
if (this.currentIndex() > 0) {
|
||||
this.currentIndex.update((i) => i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
goNext() {
|
||||
if (this.currentIndex() < this.users.length - 1) {
|
||||
this.currentIndex.update((i) => i + 1);
|
||||
}
|
||||
}
|
||||
openDialog(showBackground:boolean){
|
||||
this.showBackground = showBackground;
|
||||
|
||||
const dialogRef = this.dialog.open(TemplateVideoComponent, {
|
||||
data: {},
|
||||
width: '1000px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
if (result === false) {
|
||||
this.showBackground = false; // Reset or take any action
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onImageClick(path: string) {
|
||||
this.selectedPath = path;
|
||||
|
||||
setTimeout(() => {
|
||||
this.router.navigate([path]);
|
||||
}, 100); // brief delay to show border
|
||||
}
|
||||
}
|
||||
import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import {
|
||||
faqList,
|
||||
followercardsFirst,
|
||||
followercardSecond,
|
||||
followercardThird,
|
||||
frameworks,
|
||||
tiles,
|
||||
users,
|
||||
topcardsGrid,
|
||||
} from '../front-pagesData';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { ImageSliderComponent } from '../image-slider/image-slider.component';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { TemplateVideoComponent } from '../template-video/template-video.component';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage-details',
|
||||
imports: [
|
||||
MaterialModule,
|
||||
IconModule,
|
||||
CommonModule,
|
||||
ImageSliderComponent,
|
||||
FooterComponent,
|
||||
RouterModule
|
||||
],
|
||||
templateUrl: './homepage-details.component.html',
|
||||
styleUrl: './homepage-details.component.scss',
|
||||
})
|
||||
export class HomepageDetailsComponent {
|
||||
|
||||
topcards=topcardsGrid;
|
||||
|
||||
|
||||
centered = false;
|
||||
disabled = false;
|
||||
unbounded = false;
|
||||
radius: number;
|
||||
color: string;
|
||||
showBackground: boolean = false;
|
||||
frameworks = frameworks;
|
||||
selectedIndex = 1;
|
||||
|
||||
readonly dialog = inject(MatDialog);
|
||||
private router = inject(Router);
|
||||
private destroyRef = inject(DestroyRef); // ✅ For automatic cleanup
|
||||
private mediaMatcher = inject(MediaMatcher); // ✅ Proper MediaMatcher injection
|
||||
|
||||
mobileQuery: MediaQueryList;
|
||||
isMobileView = false;
|
||||
|
||||
readonly panelOpenState = signal(false);
|
||||
tiles = tiles;
|
||||
hideCloserBtn: boolean = true;
|
||||
users = users;
|
||||
expandedIndex: number | null = null;
|
||||
currentIndex = signal(0); // Starting from 0
|
||||
faqList = faqList;
|
||||
selectedPath: string | null = null;
|
||||
clicked = false;
|
||||
|
||||
followercardsfirst = followercardsFirst;
|
||||
followercardsecond = followercardSecond;
|
||||
followercardthird = followercardThird;
|
||||
|
||||
currentUser = computed(() => this.users[this.currentIndex()]);
|
||||
displayCount = computed(() => `${this.currentIndex() + 1}/${this.users.length}`);
|
||||
|
||||
constructor() {
|
||||
const isSmallScreen = this.mediaMatcher.matchMedia('(max-width: 599px)');
|
||||
// ✅ Setup media query for max-width: 1199px
|
||||
this.mobileQuery = this.mediaMatcher.matchMedia('(max-width: 1199px)');
|
||||
this.isMobileView = this.mobileQuery.matches;
|
||||
|
||||
const listener = (e: MediaQueryListEvent) => {
|
||||
this.isMobileView = e.matches;
|
||||
};
|
||||
|
||||
// ✅ Listen to viewport changes
|
||||
this.mobileQuery.addEventListener('change', listener);
|
||||
|
||||
// ✅ Clean up listener on component destroy
|
||||
this.destroyRef.onDestroy(() => {
|
||||
this.mobileQuery.removeEventListener('change', listener);
|
||||
});
|
||||
}
|
||||
isOver(): boolean {
|
||||
return this.mediaMatcher.matchMedia('(max-width: 1199px)').matches;
|
||||
}
|
||||
|
||||
goPrev() {
|
||||
if (this.currentIndex() > 0) {
|
||||
this.currentIndex.update((i) => i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
goNext() {
|
||||
if (this.currentIndex() < this.users.length - 1) {
|
||||
this.currentIndex.update((i) => i + 1);
|
||||
}
|
||||
}
|
||||
openDialog(showBackground:boolean){
|
||||
this.showBackground = showBackground;
|
||||
|
||||
const dialogRef = this.dialog.open(TemplateVideoComponent, {
|
||||
data: {},
|
||||
width: '1000px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
if (result === false) {
|
||||
this.showBackground = false; // Reset or take any action
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onImageClick(path: string) {
|
||||
this.selectedPath = path;
|
||||
|
||||
setTimeout(() => {
|
||||
this.router.navigate([path]);
|
||||
}, 100); // brief delay to show border
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,87 +1,87 @@
|
||||
<div>
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav-content class="landing-page">
|
||||
<mat-toolbar class="topbar front-topbar topbar-xl m-auto bg-light-primary p-y-8"
|
||||
[ngClass]="{ 'fixed-topbar': isTopbarFixed }">
|
||||
<div class="custom-container full-width">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="branding p-x-0">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
@if(!isMobileView){
|
||||
<div class="d-none d-lg-flex justify-content-between toolBarContent">
|
||||
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/about']"
|
||||
[class.selected]="isActiveRoute('about')">
|
||||
Novinky
|
||||
</button>
|
||||
<button mat-button class="m-x-8 f-s-14 f-w-500 nav-item" [class.selected]="isActiveRoute('blog')"
|
||||
[routerLink]="['/front-pages/blog']">
|
||||
Blog <span class="bg-light-primary text-primary rounded f-w-600 p-x-8 p-y-4 f-s-12 m-l-4">
|
||||
Nové
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('contact')"
|
||||
[routerLink]="['/front-pages/contact']">
|
||||
Kontakty
|
||||
</button>
|
||||
</div>
|
||||
<a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
|
||||
} @if(isMobileView){
|
||||
<button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
|
||||
(click)="customizerRight.toggle()">
|
||||
<i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<div class="content-scroll">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
|
||||
|
||||
<div class="">
|
||||
<div class="branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<div class="">
|
||||
<mat-list role="list">
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark" [routerLink]="['/front-pages/about']"
|
||||
[class.selected]="isActiveRoute('about')">
|
||||
Novinky
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark" [class.selected]="isActiveRoute('blog')"
|
||||
[routerLink]="['/front-pages/blog']">
|
||||
Blog
|
||||
<span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
New
|
||||
</span>
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
|
||||
[routerLink]="['/front-pages/contact']">
|
||||
Kontakty
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem" class="w-100">
|
||||
<a mat-flat-button color="primary" class="w-100"
|
||||
[routerLink]="'/authentication/login'">Prihlásenie</a></mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
@if(showBackToTop){
|
||||
<div
|
||||
class="back-to-top bg-primary rounded-circle d-flex align-items-center justify-content-center shadow icon-54 cursor-pointer"
|
||||
(click)="scrollToTop()">
|
||||
<i-tabler name="arrow-up" class="icon-24 text-white"></i-tabler>
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav-content class="landing-page">
|
||||
<mat-toolbar class="topbar front-topbar topbar-xl m-auto bg-light-primary p-y-8"
|
||||
[ngClass]="{ 'fixed-topbar': isTopbarFixed }">
|
||||
<div class="custom-container full-width">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="branding p-x-0">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
@if(!isMobileView){
|
||||
<div class="d-none d-lg-flex justify-content-between toolBarContent">
|
||||
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/portfolio']"
|
||||
[class.selected]="isActiveRoute('portfolio')">
|
||||
Novinky
|
||||
</button>
|
||||
<button mat-button class="m-x-8 f-s-14 f-w-500 nav-item" [class.selected]="isActiveRoute('blog')"
|
||||
[routerLink]="['/front-pages/blog']">
|
||||
Blog <span class="bg-light-primary text-primary rounded f-w-600 p-x-8 p-y-4 f-s-12 m-l-4">
|
||||
Nové
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('contact')"
|
||||
[routerLink]="['/front-pages/contact']">
|
||||
Kontakty
|
||||
</button>
|
||||
</div>
|
||||
<a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
|
||||
} @if(isMobileView){
|
||||
<button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
|
||||
(click)="customizerRight.toggle()">
|
||||
<i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<div class="content-scroll">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
|
||||
|
||||
<div class="">
|
||||
<div class="branding">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
<div class="">
|
||||
<mat-list role="list">
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark" [routerLink]="['/front-pages/portfolio']"
|
||||
[class.selected]="isActiveRoute('portfolio')">
|
||||
Novinky
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark" [class.selected]="isActiveRoute('blog')"
|
||||
[routerLink]="['/front-pages/blog']">
|
||||
Blog
|
||||
<span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
New
|
||||
</span>
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem">
|
||||
<button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
|
||||
[routerLink]="['/front-pages/contact']">
|
||||
Kontakty
|
||||
</button></mat-list-item>
|
||||
<mat-list-item role="listitem" class="w-100">
|
||||
<a mat-flat-button color="primary" class="w-100"
|
||||
[routerLink]="'/authentication/login'">Prihlásenie</a></mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
@if(showBackToTop){
|
||||
<div
|
||||
class="back-to-top bg-primary rounded-circle d-flex align-items-center justify-content-center shadow icon-54 cursor-pointer"
|
||||
(click)="scrollToTop()">
|
||||
<i-tabler name="arrow-up" class="icon-24 text-white"></i-tabler>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1,32 +1,32 @@
|
||||
.landing-page {
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.heightToolbar {
|
||||
height: 46px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(/assets/images/front-pages/topbar-bg.png);
|
||||
}
|
||||
|
||||
.toolBarContent {
|
||||
.nav-item {
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary); // optional for visibility
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--mat-sys-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
.custom-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.heightToolbar {
|
||||
height: 46px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(/assets/images/front-pages/topbar-bg.png);
|
||||
}
|
||||
|
||||
.toolBarContent {
|
||||
.nav-item {
|
||||
&.selected {
|
||||
background-color: var(--mat-sys-primary-fixed-dim);
|
||||
color: var(--mat-sys-primary); // optional for visibility
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--mat-sys-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,61 +1,61 @@
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, HostListener, inject, ViewChild } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material/sidenav';
|
||||
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage',
|
||||
imports: [MaterialModule, BrandingComponent, RouterLink,
|
||||
IconModule, RouterOutlet, CommonModule],
|
||||
templateUrl: './homepage.component.html',
|
||||
styleUrl: './homepage.component.scss'
|
||||
})
|
||||
export class HomepageComponent {
|
||||
@ViewChild('customizerRight') customizerRight!: MatSidenav;
|
||||
selected: string = ''; // default selected
|
||||
mobileQuery: MediaQueryList;
|
||||
isMobileView = false;
|
||||
private router = inject(Router)
|
||||
private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
|
||||
showBackToTop: boolean = false;
|
||||
isTopbarFixed: boolean = false;
|
||||
constructor(private route: ActivatedRoute) {
|
||||
const media = inject(MediaMatcher);
|
||||
this.mobileQuery = media.matchMedia('(max-width: 1199px)');
|
||||
this.isMobileView = this.mobileQuery.matches;
|
||||
|
||||
this.mobileQuery.addEventListener('change', (e) => {
|
||||
|
||||
this.isMobileView = e.matches;
|
||||
this.closeSidenavIfNeeded();
|
||||
});
|
||||
}
|
||||
closeSidenavIfNeeded() {
|
||||
if (!this.isMobileView && this.customizerRight?.opened) {
|
||||
this.customizerRight.close();
|
||||
}
|
||||
}
|
||||
isOver(): boolean {
|
||||
return this.mediaMatcher.matches;
|
||||
}
|
||||
|
||||
isActiveRoute(route: string): boolean {
|
||||
return this.router.url.includes(`/front-pages/${route}`);
|
||||
}
|
||||
getNavigate() {
|
||||
this.router.navigate(['/dashboards/dashboard1'])
|
||||
}
|
||||
|
||||
scrollToTop(): void {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
@HostListener('window:scroll', [])
|
||||
onWindowScroll() {
|
||||
this.showBackToTop = window.scrollY > 300;
|
||||
this.isTopbarFixed = scrollY > 45;
|
||||
}
|
||||
}
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, HostListener, inject, ViewChild } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material/sidenav';
|
||||
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-homepage',
|
||||
imports: [MaterialModule, BrandingComponent, RouterLink,
|
||||
IconModule, RouterOutlet, CommonModule],
|
||||
templateUrl: './homepage.component.html',
|
||||
styleUrl: './homepage.component.scss'
|
||||
})
|
||||
export class HomepageComponent {
|
||||
@ViewChild('customizerRight') customizerRight!: MatSidenav;
|
||||
selected: string = ''; // default selected
|
||||
mobileQuery: MediaQueryList;
|
||||
isMobileView = false;
|
||||
private router = inject(Router)
|
||||
private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
|
||||
showBackToTop: boolean = false;
|
||||
isTopbarFixed: boolean = false;
|
||||
constructor(private route: ActivatedRoute) {
|
||||
const media = inject(MediaMatcher);
|
||||
this.mobileQuery = media.matchMedia('(max-width: 1199px)');
|
||||
this.isMobileView = this.mobileQuery.matches;
|
||||
|
||||
this.mobileQuery.addEventListener('change', (e) => {
|
||||
|
||||
this.isMobileView = e.matches;
|
||||
this.closeSidenavIfNeeded();
|
||||
});
|
||||
}
|
||||
closeSidenavIfNeeded() {
|
||||
if (!this.isMobileView && this.customizerRight?.opened) {
|
||||
this.customizerRight.close();
|
||||
}
|
||||
}
|
||||
isOver(): boolean {
|
||||
return this.mediaMatcher.matches;
|
||||
}
|
||||
|
||||
isActiveRoute(route: string): boolean {
|
||||
return this.router.url.includes(`/front-pages/${route}`);
|
||||
}
|
||||
getNavigate() {
|
||||
this.router.navigate(['/dashboards/dashboard1'])
|
||||
}
|
||||
|
||||
scrollToTop(): void {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
@HostListener('window:scroll', [])
|
||||
onWindowScroll() {
|
||||
this.showBackToTop = window.scrollY > 300;
|
||||
this.isTopbarFixed = scrollY > 45;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
<div class="img-slider-content">
|
||||
<div class="container img-slider">
|
||||
<div class="">
|
||||
<div class="row m-b-48">
|
||||
<div class="col-md-5">
|
||||
<h2 class="f-s-40 lh-lg m-b-24 section-sub-title">Our leadership</h2>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="m-0">
|
||||
Our robust analytics offer rich insights into the information
|
||||
buyers want, informing where teams
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7 m-t-24 position-relative d-flex flex-column justify-content-end align-items-end">
|
||||
<div class="d-flex gap-16">
|
||||
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Previous" (click)="prev()">
|
||||
<i-tabler name="arrow-left" class="d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Next" (click)="next()">
|
||||
<i-tabler name="arrow-right" class="d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@for (member of visibleTeamMembers(); track member.id){
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<mat-card class="cardWithShadow productcard overflow-hidden rounded-8 position-relative shadow-none">
|
||||
<a routerLink="/widgets/cards">
|
||||
<img [src]="member.image" alt="imgSrc" class="w-100 h-100 rounded-7" mat-card-image />
|
||||
</a>
|
||||
<mat-card class="position-absolute info-card text-center p-y-16 p-x-10">
|
||||
<h3 class="f-w-600 m-b-8">{{ member.name }}</h3>
|
||||
<p class="f-s-14 m-y-0">{{ member.position }}</p>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-slider-content">
|
||||
<div class="container img-slider">
|
||||
<div class="">
|
||||
<div class="row m-b-48">
|
||||
<div class="col-md-5">
|
||||
<h2 class="f-s-40 lh-lg m-b-24 section-sub-title">Our leadership</h2>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="m-0">
|
||||
Our robust analytics offer rich insights into the information
|
||||
buyers want, informing where teams
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7 m-t-24 position-relative d-flex flex-column justify-content-end align-items-end">
|
||||
<div class="d-flex gap-16">
|
||||
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Previous" (click)="prev()">
|
||||
<i-tabler name="arrow-left" class="d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
<button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Next" (click)="next()">
|
||||
<i-tabler name="arrow-right" class="d-flex align-items-center justify-content-center"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@for (member of visibleTeamMembers(); track member.id){
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<mat-card class="cardWithShadow productcard overflow-hidden rounded-8 position-relative shadow-none">
|
||||
<a routerLink="/widgets/cards">
|
||||
<img [src]="member.image" alt="imgSrc" class="w-100 h-100 rounded-7" mat-card-image />
|
||||
</a>
|
||||
<mat-card class="position-absolute info-card text-center p-y-16 p-x-10">
|
||||
<h3 class="f-w-600 m-b-8">{{ member.name }}</h3>
|
||||
<p class="f-s-14 m-y-0">{{ member.position }}</p>
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,22 +1,22 @@
|
||||
.img-slider-content {
|
||||
.img-slider {
|
||||
|
||||
.mat-mdc-card {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.productcard {
|
||||
position: relative;
|
||||
|
||||
.info-card {
|
||||
bottom: 42px; // controls overlap depth
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.img-slider-content {
|
||||
.img-slider {
|
||||
|
||||
.mat-mdc-card {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.productcard {
|
||||
position: relative;
|
||||
|
||||
.info-card {
|
||||
bottom: 42px; // controls overlap depth
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ImageSliderComponent } from './image-slider.component';
|
||||
|
||||
describe('ImageSliderComponent', () => {
|
||||
let component: ImageSliderComponent;
|
||||
let fixture: ComponentFixture<ImageSliderComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ImageSliderComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ImageSliderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ImageSliderComponent } from './image-slider.component';
|
||||
|
||||
describe('ImageSliderComponent', () => {
|
||||
let component: ImageSliderComponent;
|
||||
let fixture: ComponentFixture<ImageSliderComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ImageSliderComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ImageSliderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import { Component, computed, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { team } from '../front-pagesData';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-slider',
|
||||
imports: [MaterialModule,IconModule],
|
||||
templateUrl: './image-slider.component.html',
|
||||
styleUrl: './image-slider.component.scss'
|
||||
})
|
||||
export class ImageSliderComponent {
|
||||
team = team;
|
||||
// Signals
|
||||
currentPage = signal(0);
|
||||
pageSize = 4;
|
||||
|
||||
visibleTeamMembers = computed(() => {
|
||||
const start = this.currentPage() * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.team.slice(start, end);
|
||||
});
|
||||
|
||||
next() {
|
||||
console.log('next--->',this.visibleTeamMembers().map(m => m.id));
|
||||
const totalPages = Math.ceil(this.team.length / this.pageSize);
|
||||
if (this.currentPage() < totalPages - 1) {
|
||||
this.currentPage.update((p) => p + 1);
|
||||
}
|
||||
}
|
||||
|
||||
prev() {
|
||||
console.log(this.visibleTeamMembers().map(m => m.id));
|
||||
if (this.currentPage() > 0) {
|
||||
this.currentPage.update((p) => p - 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
import { Component, computed, signal } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { team } from '../front-pagesData';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-slider',
|
||||
imports: [MaterialModule,IconModule],
|
||||
templateUrl: './image-slider.component.html',
|
||||
styleUrl: './image-slider.component.scss'
|
||||
})
|
||||
export class ImageSliderComponent {
|
||||
team = team;
|
||||
// Signals
|
||||
currentPage = signal(0);
|
||||
pageSize = 4;
|
||||
|
||||
visibleTeamMembers = computed(() => {
|
||||
const start = this.currentPage() * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.team.slice(start, end);
|
||||
});
|
||||
|
||||
next() {
|
||||
console.log('next--->',this.visibleTeamMembers().map(m => m.id));
|
||||
const totalPages = Math.ceil(this.team.length / this.pageSize);
|
||||
if (this.currentPage() < totalPages - 1) {
|
||||
this.currentPage.update((p) => p + 1);
|
||||
}
|
||||
}
|
||||
|
||||
prev() {
|
||||
console.log(this.visibleTeamMembers().map(m => m.id));
|
||||
if (this.currentPage() > 0) {
|
||||
this.currentPage.update((p) => p - 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7 col-sm-11">
|
||||
<h2 class="f-s-40 text-center m-b-48 lh-normal section-sub-title">
|
||||
111,476+ Trusted developers & many tech giants as well
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@for(plan of plans;track plan){
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<mat-card class="cardWithShadow b-1">
|
||||
<mat-card-content>
|
||||
|
||||
<div class="m-b-16 d-flex align-items-center">
|
||||
<h6 class="f-s-20 f-w-600 ">
|
||||
{{ plan.title }}
|
||||
@if (plan.popular) {
|
||||
<span class="bg-light-primary text-primary rounded f-w-600 f-s-12 p-y-2 p-x-8">
|
||||
Popular
|
||||
</span>
|
||||
}
|
||||
</h6>
|
||||
</div>
|
||||
<p class="f-s-12 m-b-32 m-t-0">{{ plan.description }}</p>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="price-line m-t-32">
|
||||
<span class="f-s-40 f-w-600">${{ plan.price }}</span>
|
||||
<span class="f-s-14">/{{ plan.period }}</span>
|
||||
</div>
|
||||
<div class="m-y-32">
|
||||
@for(feature of plan.features; track feature) {
|
||||
<div class="d-flex align-items-center gap-8 m-b-12">
|
||||
<img
|
||||
[src]="feature.included ? '/assets/images/front-pages/icon-circle-check.svg' : '/assets/images/front-pages/icon-circle-x.svg'"
|
||||
alt="icon-facebook-dark" width="21" height="21" />
|
||||
|
||||
<span [ngClass]="{
|
||||
'f-w-600': feature.bold,
|
||||
'f-s-14 op-5': !feature.included,
|
||||
'f-s-14': feature.included
|
||||
}">
|
||||
{{ feature.text }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button mat-flat-button color="primary" class="w-100 ">
|
||||
Purchase Now
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="m-t-32">
|
||||
<p class="text-center f-s-14 m-b-0">Secured payment with PayPal & Razorpay</p>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-32 m-x-0 gap-48 flex-wrap">
|
||||
@for( logo of paymentLogos;track logo){
|
||||
<img class="cursor-pointer" [src]="logo.src" [alt]="logo.alt" [matTooltip]="logo.tooltip"
|
||||
matTooltipPosition="below">
|
||||
}
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7 col-sm-11">
|
||||
<h2 class="f-s-40 text-center m-b-48 lh-normal section-sub-title">
|
||||
111,476+ Trusted developers & many tech giants as well
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@for(plan of plans;track plan){
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<mat-card class="cardWithShadow b-1">
|
||||
<mat-card-content>
|
||||
|
||||
<div class="m-b-16 d-flex align-items-center">
|
||||
<h6 class="f-s-20 f-w-600 ">
|
||||
{{ plan.title }}
|
||||
@if (plan.popular) {
|
||||
<span class="bg-light-primary text-primary rounded f-w-600 f-s-12 p-y-2 p-x-8">
|
||||
Popular
|
||||
</span>
|
||||
}
|
||||
</h6>
|
||||
</div>
|
||||
<p class="f-s-12 m-b-32 m-t-0">{{ plan.description }}</p>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="price-line m-t-32">
|
||||
<span class="f-s-40 f-w-600">${{ plan.price }}</span>
|
||||
<span class="f-s-14">/{{ plan.period }}</span>
|
||||
</div>
|
||||
<div class="m-y-32">
|
||||
@for(feature of plan.features; track feature) {
|
||||
<div class="d-flex align-items-center gap-8 m-b-12">
|
||||
<img
|
||||
[src]="feature.included ? '/assets/images/front-pages/icon-circle-check.svg' : '/assets/images/front-pages/icon-circle-x.svg'"
|
||||
alt="icon-facebook-dark" width="21" height="21" />
|
||||
|
||||
<span [ngClass]="{
|
||||
'f-w-600': feature.bold,
|
||||
'f-s-14 op-5': !feature.included,
|
||||
'f-s-14': feature.included
|
||||
}">
|
||||
{{ feature.text }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button mat-flat-button color="primary" class="w-100 ">
|
||||
Purchase Now
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="m-t-32">
|
||||
<p class="text-center f-s-14 m-b-0">Secured payment with PayPal & Razorpay</p>
|
||||
<div class="d-flex align-items-center justify-content-center m-t-32 m-x-0 gap-48 flex-wrap">
|
||||
@for( logo of paymentLogos;track logo){
|
||||
<img class="cursor-pointer" [src]="logo.src" [alt]="logo.alt" [matTooltip]="logo.tooltip"
|
||||
matTooltipPosition="below">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PagePricingComponent } from './page-pricing.component';
|
||||
|
||||
describe('PagePricingComponent', () => {
|
||||
let component: PagePricingComponent;
|
||||
let fixture: ComponentFixture<PagePricingComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PagePricingComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PagePricingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PagePricingComponent } from './page-pricing.component';
|
||||
|
||||
describe('PagePricingComponent', () => {
|
||||
let component: PagePricingComponent;
|
||||
let fixture: ComponentFixture<PagePricingComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PagePricingComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PagePricingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { paymentLogos, plans } from '../front-pagesData';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-pricing',
|
||||
imports: [MaterialModule, IconModule, CommonModule],
|
||||
templateUrl: './page-pricing.component.html',
|
||||
styleUrl: './page-pricing.component.scss',
|
||||
})
|
||||
export class PagePricingComponent {
|
||||
plans = plans;
|
||||
|
||||
paymentLogos = paymentLogos;
|
||||
}
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { paymentLogos, plans } from '../front-pagesData';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-pricing',
|
||||
imports: [MaterialModule, IconModule, CommonModule],
|
||||
templateUrl: './page-pricing.component.html',
|
||||
styleUrl: './page-pricing.component.scss',
|
||||
})
|
||||
export class PagePricingComponent {
|
||||
plans = plans;
|
||||
|
||||
paymentLogos = paymentLogos;
|
||||
}
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Portfolio
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Explore Our Latest Works</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap m-b-24">
|
||||
<div class="d-flex align-items-center gap-8 m-b-10">
|
||||
<h5 class="f-w-500 f-s-20">Portfolio</h5>
|
||||
<div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
|
||||
<div class="f-s-14 lh-sm">{{ filteredCount }} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search bar pushed to the right -->
|
||||
<mat-form-field appearance="outline" class="search-bar-style hide-hint">
|
||||
<mat-icon matPrefix>search</mat-icon>
|
||||
<input matInput placeholder="Search Photos" [(ngModel)]="searchText" (input)="onSearchChange()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row">
|
||||
@for(productcard of filteredCardImgs; track productcard.id) {
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="cardWithShadow productcard overflow-hidden b-1 rounded">
|
||||
<a routerLink="/widgets/cards">
|
||||
<img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100 object-cover" height="220" mat-card-image />
|
||||
</a>
|
||||
<mat-card-content class="p-b-24 p-t-12 position-relative">
|
||||
<mat-card-title class="mat-headline-2 f-s-16 m-b-4">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<!-- Left Side: Text Content -->
|
||||
<div>
|
||||
<h6 class="f-s-16 lh-sm f-w-600">{{ productcard.title }}</h6>
|
||||
<p class="f-s-12 f-w-400 m-y-0">{{ productcard.date }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Icon -->
|
||||
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-title>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Novinky
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Novinky & aktuality</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacing-top-bottom">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap m-b-24">
|
||||
<div class="d-flex align-items-center gap-8 m-b-10">
|
||||
<h5 class="f-w-500 f-s-20">Portfolio</h5>
|
||||
<div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
|
||||
<div class="f-s-14 lh-sm">{{ filteredCount }} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search bar pushed to the right -->
|
||||
<mat-form-field appearance="outline" class="search-bar-style hide-hint">
|
||||
<mat-icon matPrefix>search</mat-icon>
|
||||
<input matInput placeholder="Search Photos" [(ngModel)]="searchText" (input)="onSearchChange()" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row">
|
||||
@for(productcard of filteredCardImgs; track productcard.id) {
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="cardWithShadow productcard overflow-hidden b-1 rounded">
|
||||
<a routerLink="/widgets/cards">
|
||||
<img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100 object-cover" height="220" mat-card-image />
|
||||
</a>
|
||||
<mat-card-content class="p-b-24 p-t-12 position-relative">
|
||||
<mat-card-title class="mat-headline-2 f-s-16 m-b-4">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<!-- Left Side: Text Content -->
|
||||
<div>
|
||||
<h6 class="f-s-16 lh-sm f-w-600">{{ productcard.title }}</h6>
|
||||
<p class="f-s-12 f-w-400 m-y-0">{{ productcard.date }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Icon -->
|
||||
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-title>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PortfolioComponent } from './portfolio.component';
|
||||
|
||||
describe('PortfolioComponent', () => {
|
||||
let component: PortfolioComponent;
|
||||
let fixture: ComponentFixture<PortfolioComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PortfolioComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PortfolioComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PortfolioComponent } from './portfolio.component';
|
||||
|
||||
describe('PortfolioComponent', () => {
|
||||
let component: PortfolioComponent;
|
||||
let fixture: ComponentFixture<PortfolioComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PortfolioComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PortfolioComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { productcards } from '../front-pagesData';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-portfolio',
|
||||
imports: [MaterialModule, IconModule, FooterComponent, CommonModule, FormsModule],
|
||||
templateUrl: './portfolio.component.html',
|
||||
styleUrl: './portfolio.component.scss'
|
||||
})
|
||||
export class PortfolioComponent implements OnInit {
|
||||
|
||||
filteredCards = productcards;
|
||||
|
||||
searchText: string = '';
|
||||
|
||||
filteredCardImgs = [...this.filteredCards]; // Initialize with full data
|
||||
filteredCount: number = this.filteredCardImgs.length;
|
||||
ngOnInit(): void {
|
||||
console.log('filteredCards', this.filteredCards)
|
||||
}
|
||||
onSearchChange() {
|
||||
const query = this.searchText.toLowerCase().trim();
|
||||
this.filteredCardImgs = this.filteredCards.filter(item =>
|
||||
item.title.toLowerCase().includes(query) ||
|
||||
item.date.toLowerCase().includes(query)
|
||||
);
|
||||
this.filteredCount = this.filteredCardImgs.length; // ✅ update the count here
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { productcards } from '../front-pagesData';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-portfolio',
|
||||
imports: [MaterialModule, IconModule, FooterComponent, CommonModule, FormsModule],
|
||||
templateUrl: './portfolio.component.html',
|
||||
styleUrl: './portfolio.component.scss'
|
||||
})
|
||||
export class PortfolioComponent implements OnInit {
|
||||
|
||||
filteredCards = productcards;
|
||||
|
||||
searchText: string = '';
|
||||
|
||||
filteredCardImgs = [...this.filteredCards]; // Initialize with full data
|
||||
filteredCount: number = this.filteredCardImgs.length;
|
||||
ngOnInit(): void {
|
||||
console.log('filteredCards', this.filteredCards)
|
||||
}
|
||||
onSearchChange() {
|
||||
const query = this.searchText.toLowerCase().trim();
|
||||
this.filteredCardImgs = this.filteredCards.filter(item =>
|
||||
item.title.toLowerCase().includes(query) ||
|
||||
item.date.toLowerCase().includes(query)
|
||||
);
|
||||
this.filteredCount = this.filteredCardImgs.length; // ✅ update the count here
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Pricing Page
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Choose Your Plan</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-pricing spacing-top-bottom">
|
||||
<div class="container">
|
||||
<app-page-pricing></app-page-pricing>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
<div class="banner-section bg-light-primary spacing-top-bottom">
|
||||
<div class="container">
|
||||
<p class="text-primary text-center text-uppercase f-s-14 m-t-0">
|
||||
Pricing Page
|
||||
</p>
|
||||
<h1 class="text-center f-s-48 section-sub-title lh-normal">Choose Your Plan</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-pricing spacing-top-bottom">
|
||||
<div class="container">
|
||||
<app-page-pricing></app-page-pricing>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PricingComponent } from './pricing.component';
|
||||
|
||||
describe('PricingComponent', () => {
|
||||
let component: PricingComponent;
|
||||
let fixture: ComponentFixture<PricingComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PricingComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PricingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PricingComponent } from './pricing.component';
|
||||
|
||||
describe('PricingComponent', () => {
|
||||
let component: PricingComponent;
|
||||
let fixture: ComponentFixture<PricingComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PricingComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PricingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { PagePricingComponent } from '../page-pricing/page-pricing.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pricing',
|
||||
imports: [MaterialModule,IconModule,FooterComponent,PagePricingComponent],
|
||||
templateUrl: './pricing.component.html',
|
||||
styleUrl: './pricing.component.scss'
|
||||
})
|
||||
export class PricingComponent {
|
||||
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { FooterComponent } from '../footer/footer.component';
|
||||
import { PagePricingComponent } from '../page-pricing/page-pricing.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pricing',
|
||||
imports: [MaterialModule,IconModule,FooterComponent,PagePricingComponent],
|
||||
templateUrl: './pricing.component.html',
|
||||
styleUrl: './pricing.component.scss'
|
||||
})
|
||||
export class PricingComponent {
|
||||
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<mat-dialog-content class="p-b-0">
|
||||
<iframe width="100%" height="500" src="https://www.youtube.com/embed/n-J3dDy1kro?si=k441rPIuc1bmKXJ9" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
|
||||
class="rounded-8"></iframe>
|
||||
</mat-dialog-content>
|
||||
<div mat-dialog-actions>
|
||||
<!-- <button mat-flat-button> Close</button> -->
|
||||
<button mat-flat-button class="bg-light text-primary" (click)="closeDialog()">
|
||||
Close
|
||||
</button>
|
||||
<mat-dialog-content class="p-b-0">
|
||||
<iframe width="100%" height="500" src="https://www.youtube.com/embed/n-J3dDy1kro?si=k441rPIuc1bmKXJ9" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
|
||||
class="rounded-8"></iframe>
|
||||
</mat-dialog-content>
|
||||
<div mat-dialog-actions>
|
||||
<!-- <button mat-flat-button> Close</button> -->
|
||||
<button mat-flat-button class="bg-light text-primary" (click)="closeDialog()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
@@ -1,23 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TemplateVideoComponent } from './template-video.component';
|
||||
|
||||
describe('TemplateVideoComponent', () => {
|
||||
let component: TemplateVideoComponent;
|
||||
let fixture: ComponentFixture<TemplateVideoComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TemplateVideoComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TemplateVideoComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TemplateVideoComponent } from './template-video.component';
|
||||
|
||||
describe('TemplateVideoComponent', () => {
|
||||
let component: TemplateVideoComponent;
|
||||
let fixture: ComponentFixture<TemplateVideoComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TemplateVideoComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TemplateVideoComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
@Component({
|
||||
selector: 'app-template-video',
|
||||
imports: [MaterialModule,
|
||||
IconModule,],
|
||||
templateUrl: './template-video.component.html',
|
||||
styleUrl: './template-video.component.scss'
|
||||
})
|
||||
export class TemplateVideoComponent {
|
||||
constructor(private dialogRef: MatDialogRef<TemplateVideoComponent>){
|
||||
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close(false); // Pass false back to parent
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { IconModule } from '../../../icon/icon.module';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
@Component({
|
||||
selector: 'app-template-video',
|
||||
imports: [MaterialModule,
|
||||
IconModule,],
|
||||
templateUrl: './template-video.component.html',
|
||||
styleUrl: './template-video.component.scss'
|
||||
})
|
||||
export class TemplateVideoComponent {
|
||||
constructor(private dialogRef: MatDialogRef<TemplateVideoComponent>){
|
||||
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close(false); // Pass false back to parent
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user