3 |
12 |
2 | @if (items.length > 0) {
3 |
--------------------------------------------------------------------------------
/src/app/admin/admin.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, HostListener, Renderer2 } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-admin',
5 | templateUrl: './admin.component.html',
6 | styleUrls: ['./admin.component.css'],
7 | })
8 | export class AdminComponent {
9 | title = 'event-bud-frontend';
10 |
11 | constructor(private element: ElementRef, private rendered: Renderer2) { }
12 |
13 | @HostListener('click', ['$event.target']) onClick(e: Element) {
14 | const profileDropdown = this.element.nativeElement.querySelector('.profile-dropdown') as Element;
15 |
16 | if (!profileDropdown.contains(e)) {
17 | const profileDropdownList = this.element.nativeElement.querySelector('.profile-dropdown-list');
18 | this.rendered.setAttribute(profileDropdownList, 'aria-expanded', 'false')
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/admin/layouts/layouts.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { RouterModule } from '@angular/router';
4 | import { FooterComponent } from './footer/footer.component';
5 | import { HeaderComponent } from './header/header.component';
6 | import { SidebarCollapseDirective } from './sidebar/sidebar-collapse.directive';
7 | import { SidebarComponent } from './sidebar/sidebar.component';
8 |
9 |
10 |
11 | @NgModule({
12 | declarations: [
13 | SidebarComponent,
14 | FooterComponent,
15 | HeaderComponent
16 | ],
17 | imports: [
18 | CommonModule,
19 | RouterModule,
20 | SidebarCollapseDirective
21 | ],
22 | exports: [
23 | HeaderComponent,
24 | SidebarComponent,
25 | FooterComponent,
26 | ]
27 | })
28 | export class LayoutsModule { }
29 |
--------------------------------------------------------------------------------
/src/app/shared/components/ngw-tab/ngw-tab.component.css:
--------------------------------------------------------------------------------
1 | .ngw-tab-container {
2 | @apply text-sm font-medium text-gray-500
3 | }
4 |
5 | .ngw-tab-hr {
6 | @apply flex flex-wrap -mb-px text-center
7 | }
8 |
9 | .ngw-tab-item {
10 | @apply me-2
11 | }
12 |
13 | .ngw-tab-link {
14 | @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-slate-600 hover:border-slate-300
15 | }
16 |
17 | .ngw-tab-link[aria-current=true] {
18 | @apply border-emerald-600 text-emerald-600
19 | }
20 |
21 | .ngw-tab-link[aria-disabled=true] {
22 | @apply text-gray-400 hover:border-0 rounded-t-lg cursor-not-allowed
23 | }
24 |
25 | .ngw-tab-content {
26 | @apply mt-2 text-gray-900
27 | }
28 |
29 | .ngw-tab-body {
30 | @apply p-6 bg-slate-50 rounded-lg w-full text-sm
31 | }
32 |
33 | .ngw-tab-title {
34 | @apply text-lg font-bold mb-2
35 | }
--------------------------------------------------------------------------------
/src/app/shared/utils/animations.ts:
--------------------------------------------------------------------------------
1 | import {animate, style, transition, trigger} from '@angular/animations';
2 |
3 | export const fadeInOut = trigger('fadeInOut', [
4 | transition(':enter', [
5 | style({ opacity: 0 }),
6 | animate('150ms', style({ opacity: 1 })),
7 | ]),
8 | transition(':leave', [
9 | animate('150ms', style({ opacity: 0 })),
10 | ]),
11 | ]);
12 |
13 | export const pageTransition = trigger('pageTransition', [
14 | transition(':enter', [
15 | style({ opacity: 0 }),
16 | animate('100ms', style({ opacity: 1 })),
17 | ]),
18 | transition(':leave', [
19 | animate('100ms', style({ opacity: 0 })),
20 | ]),
21 | ]);
22 |
23 | export const slideDown = trigger('slideDown', [
24 | transition(':enter', [
25 | style({opacity: 0, maxHeight: '0'}),
26 | animate('300ms ease-in', style({opacity: 1, maxHeight: '1000px'})),
27 | ]),
28 | ]);
29 |
--------------------------------------------------------------------------------
/src/app/public/layouts/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RouterLink } from '@angular/router';
3 | import { CommonService } from 'src/app/_core/services/common.service';
4 | import { AdminRoutes } from 'src/app/admin/admin.routes';
5 | import { AppRoutes } from 'src/app/app.routes';
6 | import { Images } from 'src/assets/data/images';
7 | import { PublicRoutes } from '../../public.routes';
8 |
9 | @Component({
10 | selector: 'public-header',
11 | standalone: true,
12 | imports: [RouterLink],
13 | templateUrl: './header.component.html',
14 | styleUrl: './header.component.css',
15 | })
16 | export class PublicHeaderComponent {
17 | public mainLogo: string = Images.mainLogo;
18 | readonly publicRoutes = PublicRoutes;
19 | readonly appRoutes = AppRoutes;
20 | readonly adminRoutes = AdminRoutes;
21 | constructor(public readonly commonService: CommonService) {}
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/public/public.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { RouterOutlet } from '@angular/router';
4 | import { AuthModule } from './auth/auth.module';
5 | import { HomeComponent } from './home/home.component';
6 | import { PublicFooterComponent } from './layouts/footer/footer.component';
7 | import { PublicHeaderComponent } from './layouts/header/header.component';
8 | import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
9 | import { PublicRoutingModule } from './public-routing.module';
10 | import { PublicComponent } from './public.component';
11 |
12 | @NgModule({
13 | declarations: [PublicComponent, PageNotFoundComponent, HomeComponent],
14 | imports: [
15 | CommonModule,
16 | PublicRoutingModule,
17 | AuthModule,
18 | PublicHeaderComponent,
19 | PublicFooterComponent,
20 | RouterOutlet,
21 | ],
22 | })
23 | export class PublicModule {}
24 |
--------------------------------------------------------------------------------
/src/app/shared/components/modal/modal.component.css:
--------------------------------------------------------------------------------
1 | .modal {
2 | @apply relative z-10
3 | }
4 |
5 | .modal[aria-modal=false]{
6 | @apply invisible ease-in duration-500 opacity-0
7 | }
8 |
9 | .modal[aria-modal=true] {
10 | @apply visible ease-out duration-300 opacity-100
11 | }
12 |
13 | .modal-backdrop {
14 | @apply fixed inset-0 bg-slate-900 bg-opacity-75 transition-opacity
15 | }
16 |
17 | .modal-wrapper {
18 | @apply fixed inset-0 z-10 w-screen overflow-y-auto
19 | }
20 |
21 | .modal-container {
22 | @apply flex min-h-full items-center justify-center p-4 text-center
23 | }
24 |
25 | .modal-box {
26 | @apply relative transform overflow-hidden rounded-xl bg-white text-left shadow-xl transition-all sm:my-8
27 | }
28 |
29 | .modal[aria-modal=true] .modal-box{
30 | @apply ease-out duration-300 opacity-100 translate-y-0 sm:scale-100
31 | }
32 |
33 | .modal[aria-modal=false] .modal-box{
34 | @apply ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95
35 | }
36 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/admin/views/elements/modal/admin-modal.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component } from '@angular/core';
3 | import { ModalComponent } from 'src/app/shared/components/modal/modal.component';
4 | import { ModalModule } from 'src/app/shared/components/modal/modal.module';
5 | import { pageTransition } from 'src/app/shared/utils/animations';
6 |
7 | @Component({
8 | selector: 'admin-modal',
9 | standalone: true,
10 | imports: [
11 | CommonModule,
12 | ModalModule
13 | ],
14 | templateUrl: './admin-modal.component.html',
15 | styleUrl: './admin-modal.component.css',
16 | animations: [pageTransition]
17 | })
18 | export class AdminModalComponent {
19 | showModal: boolean = false;
20 |
21 | modalCompnent: ModalComponent
22 |
23 | constructor() {
24 | this.modalCompnent = new ModalComponent();
25 | }
26 |
27 | openModal() {
28 | this.showModal = !this.showModal;
29 | }
30 |
31 | onModalCloseHandler(event: boolean) {
32 | this.showModal = event;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/public/auth/auth.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {CommonModule} from '@angular/common';
3 |
4 | import {AuthRoutingModule} from './auth-routing.module';
5 | import {SigninComponent} from "./signin/signin.component";
6 | import {SignupComponent} from "./signup/signup.component";
7 | import {ReactiveFormsModule} from "@angular/forms";
8 | import {SpinnerComponent} from "../../shared/components/spinner/spinner.component";
9 | import {ValidationErrorComponent} from "../../shared/components/validation-error/validation-error.component";
10 | import {AlertComponent} from "../../shared/components/alert/alert.component";
11 |
12 |
13 | @NgModule({
14 | declarations: [
15 | SigninComponent,
16 | SignupComponent
17 | ],
18 | imports: [
19 | CommonModule,
20 | AuthRoutingModule,
21 | ReactiveFormsModule,
22 | SpinnerComponent,
23 | ValidationErrorComponent,
24 | AlertComponent,
25 | ],
26 | exports: [
27 | SigninComponent,
28 | SignupComponent,
29 | ]
30 | })
31 | export class AuthModule { }
32 |
--------------------------------------------------------------------------------
/src/app/admin/admin.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 |
4 | import { AdminRoutingModule } from './admin-routing.module';
5 | import { LayoutsModule } from './layouts/layouts.module';
6 |
7 | import { AdminComponent } from './admin.component';
8 | import { AdminPageNotFoundComponent } from './views/admin-page-not-found/admin-page-not-found.component';
9 | import { DashboardComponent } from './views/dashboard/dashboard.component';
10 | import { EventsComponent } from './views/events/events.component';
11 | import { SettingsModule } from './views/settings/settings.module';
12 | import { ElementsModule } from './views/elements/elements.module';
13 |
14 |
15 | @NgModule({
16 | declarations: [
17 | AdminComponent,
18 | DashboardComponent,
19 | AdminPageNotFoundComponent,
20 | EventsComponent,
21 | ],
22 | imports: [
23 | CommonModule,
24 | AdminRoutingModule,
25 | LayoutsModule,
26 | SettingsModule,
27 | ElementsModule
28 | ]
29 | })
30 | export class AdminModule { }
31 |
--------------------------------------------------------------------------------
/src/app/shared/components/ngw-tab/directives/ngw-tab.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { NgwTabDirective } from './ngw-tab.directive';
4 | import { NgwTabItemDirective } from './ngw-tab-item.directive';
5 | import { NgwTabLinkDirective } from './ngw-tab-link.directive';
6 | import { NgwTabContentDirective } from './ngw-tab-content.directive';
7 | import { NgwTabTitleDirective } from './ngw-tab-title.directive';
8 | import { NgwTabBodyDirective } from './ngw-tab-body.directive';
9 |
10 |
11 |
12 | @NgModule({
13 | declarations: [],
14 | imports: [
15 | CommonModule,
16 | NgwTabDirective,
17 | NgwTabItemDirective,
18 | NgwTabLinkDirective,
19 | NgwTabContentDirective,
20 | NgwTabTitleDirective,
21 | NgwTabBodyDirective
22 | ],
23 | exports: [
24 | NgwTabDirective,
25 | NgwTabItemDirective,
26 | NgwTabLinkDirective,
27 | NgwTabContentDirective,
28 | NgwTabTitleDirective,
29 | NgwTabBodyDirective
30 | ]
31 | })
32 | export class NgwTabModule { }
33 |
--------------------------------------------------------------------------------
/src/app/admin/layouts/sidebar/sidebar-collapse.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, HostListener } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[sidebarCollapse]',
5 | standalone: true,
6 | })
7 | export class SidebarCollapseDirective {
8 | constructor(private elementRef: ElementRef) { }
9 |
10 | @HostListener('click') onClick() {
11 | const elem = this.elementRef.nativeElement as HTMLElement;
12 | const sidebar = elem.closest('.sidebar');
13 | const sidebarIsCollapsed = sidebar?.getAttribute('aria-expanded');
14 |
15 | if (sidebarIsCollapsed === 'false') {
16 | elem.closest('.sidebar')?.setAttribute('aria-expanded', 'true');
17 | }
18 | else {
19 | sidebar?.setAttribute('aria-expanded', 'false');
20 | }
21 |
22 | const subMenu = sidebar?.querySelectorAll('.sub-menu');
23 |
24 | subMenu?.forEach((subMenu: Element) => {
25 | if (subMenu.getAttribute('aria-expanded') == 'true')
26 | subMenu.setAttribute('aria-expanded', 'false');
27 |
28 | subMenu.toggleAttribute('icon-hidden');
29 | });
30 |
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/_core/interceptors/requests.interceptor.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from "@angular/core";
2 | import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
3 | import {Observable} from "rxjs";
4 | import {environment} from "src/environments/environment";
5 | import {LocalStorageService} from "../../shared/services/localStorage.service";
6 |
7 | @Injectable()
8 |
9 | export class RequestsInterceptor implements HttpInterceptor {
10 | constructor(private localStorageService: LocalStorageService) {
11 | }
12 | intercept(request: HttpRequest-
4 | @for (item of items; track $index) {
5 |
- 6 | 9 | {{item.Title}} 10 | 11 | 12 | } 13 |
15 |
20 | }
21 | @else {
22 |
16 |
19 | {{title}}
17 |{{content}}
18 |
2 |
3 |
19 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
3 | import {AdminComponent} from './admin/admin.component';
4 | import {AppComponent} from './app.component';
5 | import {AppRoutes} from './app.routes';
6 | import {PageNotFoundComponent} from './public/page-not-found/page-not-found.component';
7 | import { PublicComponent } from './public/public.component';
8 |
9 | const routes: Routes = [
10 | {
11 | path: '',
12 | component: PublicComponent,
13 | loadChildren: () => import('./public/public.module').then((m) => m.PublicModule)
14 | },
15 | {
16 | path: AppRoutes.Admin,
17 | component: AdminComponent,
18 | loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
19 | },
20 | {
21 | path: '**',
22 | component: PageNotFoundComponent
23 | }
24 | ];
25 |
26 | @NgModule({
27 | imports: [RouterModule.forRoot(routes, {
28 | // enableTracing: true, //uncomment for debugging only
29 | preloadingStrategy: PreloadAllModules,
30 | scrollPositionRestoration: 'top',
31 | })],
32 | exports: [RouterModule]
33 | })
34 | export class AppRoutingModule { }
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ngwind",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^17.0.7",
14 | "@angular/common": "^17.0.7",
15 | "@angular/compiler": "^17.0.7",
16 | "@angular/core": "^17.0.7",
17 | "@angular/forms": "^17.0.7",
18 | "@angular/platform-browser": "^17.0.7",
19 | "@angular/platform-browser-dynamic": "^17.0.7",
20 | "@angular/router": "^17.0.7",
21 | "chart.js": "^4.4.0",
22 | "notyf": "^3.10.0",
23 | "rxjs": "~7.8.0",
24 | "tslib": "^2.3.0",
25 | "zone.js": "~0.14.2"
26 | },
27 | "devDependencies": {
28 | "@angular-devkit/build-angular": "^17.0.7",
29 | "@angular/cli": "~17.0.7",
30 | "@angular/compiler-cli": "^17.0.7",
31 | "@types/jasmine": "~4.3.0",
32 | "autoprefixer": "^10.4.15",
33 | "jasmine-core": "~4.6.0",
34 | "karma": "~6.4.0",
35 | "karma-chrome-launcher": "~3.2.0",
36 | "karma-coverage": "~2.2.0",
37 | "karma-jasmine": "~5.1.0",
38 | "karma-jasmine-html-reporter": "~2.1.0",
39 | "postcss": "^8.4.30",
40 | "tailwindcss": "^3.3.3",
41 | "typescript": "~5.2.2"
42 | }
43 | }
--------------------------------------------------------------------------------
/src/app/public/auth/signup/signup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { DatetimeHelper } from 'src/app/_core/helpers/datetime.helper';
3 | import { CommonService } from 'src/app/_core/services/common.service';
4 | import { pageTransition } from 'src/app/shared/utils/animations';
5 | import { PublicRoutes } from '../../public.routes';
6 | import { Router } from '@angular/router';
7 | import { AppRoutes } from 'src/app/app.routes';
8 | import { AdminRoutes } from 'src/app/admin/admin.routes';
9 | import { Images } from 'src/assets/data/images';
10 |
11 | @Component({
12 | selector: 'app-signup',
13 | templateUrl: './signup.component.html',
14 | styleUrls: ['./signup.component.css'],
15 | animations: [pageTransition]
16 | })
17 | export class SignupComponent {
18 | readonly signupbannerImage:string = Images.auth.signup
19 | isLoading: boolean = false;
20 | readonly currentYear: number = DatetimeHelper.currentYear;
21 | readonly publicRoutes = PublicRoutes;
22 |
23 | constructor(
24 | public commonService: CommonService,
25 | private router: Router
26 | ) { }
27 |
28 | onFormSubmitHandler = (event: SubmitEvent) => {
29 | event.preventDefault();
30 |
31 | this.isLoading = true;
32 |
33 | setTimeout(() => {
34 | this.isLoading = false;
35 | this.router.navigate([AppRoutes.Admin, AdminRoutes.Dashboard]);
36 | }, 3000);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/public/layouts/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/shared/components/spinner/spinner.component.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/app/admin/views/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { formatDate } from '@angular/common';
2 | import { Component, OnInit } from '@angular/core';
3 | import { Chart, registerables } from 'chart.js';
4 | import { pageTransition } from 'src/app/shared/utils/animations';
5 | Chart.register(...registerables);
6 |
7 | @Component({
8 | selector: 'app-dashboard',
9 | templateUrl: './dashboard.component.html',
10 | styleUrls: ['./dashboard.component.css'],
11 | animations: [pageTransition]
12 | })
13 | export class DashboardComponent implements OnInit {
14 | eventDate: any = formatDate(new Date(), 'MMM dd, yyyy', 'en');
15 |
16 | ngOnInit(): void {
17 | var myChart = new Chart("areaWiseSale", {
18 | type: 'doughnut',
19 | data: {
20 | labels: ['Red', 'Blue', 'Yellow', 'Green'],
21 | datasets: [{
22 | label: '# of Votes',
23 | data: [12, 19, 3, 5],
24 | backgroundColor: [
25 | 'rgba(255, 99, 132, 0.2)',
26 | 'rgba(54, 162, 235, 0.2)',
27 | 'rgba(255, 206, 86, 0.2)',
28 | 'rgba(75, 192, 192, 0.2)',
29 | ],
30 | }]
31 | },
32 | options: {
33 | scales: {
34 | x: {
35 | display: false
36 | },
37 | y: {
38 | display: false
39 | },
40 | },
41 | plugins: {
42 | legend: {
43 | position: 'right',
44 | align: 'center',
45 | },
46 | },
47 | },
48 | });
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/shared/components/alert/alert.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { slideDown } from "../../utils/animations";
4 | import { AlertType } from "./alert.type";
5 |
6 | @Component({
7 | selector: 'app-alert',
8 | standalone: true,
9 | imports: [CommonModule],
10 | templateUrl: './alert.component.html',
11 | styleUrls: ['./alert.component.css'],
12 | animations: [slideDown]
13 | })
14 | export class AlertComponent {
15 | @Input() messages: string[] = [];
16 | @Input() type: AlertType = AlertType.Success;
17 | @Input() dismissible: boolean = false;
18 | @Input() show: boolean = false;
19 |
20 | @Output() hideAlert = new EventEmitter
4 |
18 |
5 |
17 |
6 |
16 |
7 |
9 |
10 |
12 |
14 |
15 |
2 |
3 |
4 |
5 |
6 |
26 |
--------------------------------------------------------------------------------
/src/app/shared/components/validation-error/validation-error.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit} from '@angular/core';
2 | import {CommonModule} from "@angular/common";
3 | import {FormControl} from "@angular/forms";
4 | import {ERROR_MESSAGES} from "./error-messages";
5 |
6 | @Component({
7 | selector: 'validation-error',
8 | templateUrl: './validation-error.component.html',
9 | styleUrls: ['./validation-error.component.css'],
10 | standalone: true,
11 | imports: [CommonModule],
12 | })
13 | export class ValidationErrorComponent implements OnInit {
14 |
15 | @Input() fieldControl!: FormControl | undefined;
16 |
17 | protected errorMessages: string[] = [];
18 |
19 | constructor() {
20 | }
21 |
22 | ngOnInit(): void {
23 | }
24 |
25 | hasError(): boolean {
26 | this.errorMessages = [];
27 |
28 | //check for server error
29 | if (
30 | this.fieldControl !== null
31 | && this.fieldControl !== undefined
32 | && this.fieldControl.getError('messages') !== undefined) {
33 | this.errorMessages = this.fieldControl.getError('messages');
34 | return true;
35 | }
36 |
37 | //check for client error
38 | if (
39 | this.fieldControl !== null
40 | && this.fieldControl !== undefined
41 | && this.fieldControl.errors !== null) {
42 | Object.keys(this.fieldControl.errors!).map((err: any) => {
43 | // @ts-ignore
44 | this.errorMessages.push(ERROR_MESSAGES[err]());
45 | });
46 |
47 | return this.fieldControl.touched && this.fieldControl.errors !== null;
48 | }
49 |
50 | return false;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/admin/views/elements/tab/tab-items.ts:
--------------------------------------------------------------------------------
1 | import { NgwTabContents } from "src/app/shared/components/ngw-tab/ngw-tab-contents.type";
2 |
3 | export const tabItems: NgwTabContents[] = [
4 | {
5 | Title: "Profile",
6 | IsActive: true,
7 | TabTitle: "Profile Tab",
8 | Contents: `The crimson-tinted sunset bled through the dusty window of the antique shop, casting long shadows across the
9 | cluttered aisles. Amelia, her fingers trailing along a row of tarnished silver, shivered despite the stifling summer heat.
10 | An unseen melody, played on a ghostly organ, echoed through the labyrinthine shelves, sending goosebumps scampering across
11 | her skin.`
12 | },
13 | {
14 | Title: "Settings",
15 | TabTitle: "Settings Tab",
16 | Contents: `Neon jellyfish pulsed beneath the cyber-lotus pond, their bioluminescent tendrils swaying to the hum of forgotten
17 | tech. Glitch-winged butterflies pirouetted through holographic trees, their pixels shimmering in the twilight haze. An
18 | ancient AI, buried deep within the city's circuits, whispered secrets of lost data streams and whispered revolutions. What
19 | dreams might bloom in this concrete jungle, under the gaze of a fractured moon?`
20 | },
21 | {
22 | Title: "Contacts",
23 | TabTitle: "Contacts Tab",
24 | Contents: `It is a long established fact that a reader will be distracted by the readable content of a page when
25 | looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
26 | as opposed to using 'Content here, content here', making it look like readable English.`
27 | },
28 | ];
29 |
--------------------------------------------------------------------------------
/src/app/public/auth/signin/signin.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormBuilder } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { DatetimeHelper } from 'src/app/_core/helpers/datetime.helper';
5 | import { CommonService } from 'src/app/_core/services/common.service';
6 | import { AdminRoutes } from 'src/app/admin/admin.routes';
7 | import { AppRoutes } from 'src/app/app.routes';
8 | import { pageTransition } from 'src/app/shared/utils/animations';
9 | import { Images } from 'src/assets/data/images';
10 | import { AlertType } from '../../../shared/components/alert/alert.type';
11 | import { PublicRoutes } from '../../public.routes';
12 |
13 | @Component({
14 | selector: 'app-signin',
15 | templateUrl: './signin.component.html',
16 | styleUrls: ['./signin.component.css'],
17 | animations: [pageTransition],
18 | })
19 | export class SigninComponent {
20 | readonly signinBannerImage: string = Images.bannerLogo;
21 |
22 | isLoading: boolean = false;
23 | readonly publicRoutes = PublicRoutes;
24 | readonly currentYear: number = DatetimeHelper.currentYear;
25 |
26 | serverErrors: string[] = [];
27 |
28 | signInForm = this.formBuilder.group({
29 | username: [''],
30 | password: [''],
31 | });
32 |
33 | constructor(
34 | public commonService: CommonService,
35 | private formBuilder: FormBuilder,
36 | private router: Router
37 | ) {}
38 | protected readonly AlertType = AlertType;
39 |
40 | protected onFormSubmitHandler = (event: SubmitEvent) => {
41 | event.preventDefault();
42 | this.isLoading = true;
43 |
44 | setTimeout(() => {
45 | this.isLoading = false;
46 | this.router.navigate([AppRoutes.Admin, AdminRoutes.Dashboard]);
47 | }, 3000);
48 | };
49 |
50 | protected onAlertCloseHandler = (e: any) => {
51 | this.serverErrors = [];
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/shared/components/data-table/data-table.component.css:
--------------------------------------------------------------------------------
1 | /* sticky table */
2 | .data-table {
3 | & .table-container {
4 | height: 350px;
5 | max-height: 412px;
6 | overflow: auto;
7 | }
8 | th {
9 | @apply bg-slate-50;
10 | }
11 |
12 | & th[scope="col"] {
13 | position: sticky;
14 | top: 0;
15 | }
16 | }
17 |
18 | .table-container::-webkit-scrollbar {
19 | width: 3px;
20 | height: 5px;
21 | }
22 |
23 | .table-container::-webkit-scrollbar-track {
24 | @apply bg-slate-200;
25 | }
26 |
27 | .table-container::-webkit-scrollbar-thumb {
28 | @apply bg-slate-500 rounded-sm;
29 | }
30 |
31 | .table-container::-webkit-scrollbar-thumb:hover {
32 | @apply bg-slate-200;
33 | }
34 |
35 | .table-container {
36 | scrollbar-width: thin;
37 | scrollbar-color: bg-slate-500;
38 | }
39 |
40 | /* table */
41 |
42 | .ng-wind-table {
43 | @apply w-full text-xs text-left text-gray-500;
44 | }
45 | .ng-wind-table-header {
46 | @apply text-xs text-gray-700 uppercase bg-gray-50 z-50;
47 | }
48 | .ng-wind-header-item {
49 | @apply px-4 py-3;
50 | }
51 | .ng-wind-data-item {
52 | @apply px-4 py-3;
53 | }
54 |
55 | /* pagination */
56 |
57 | .ng-wind-table-pagination {
58 | @apply flex items-center flex-wrap md:flex-row justify-between pt-4 text-xs;
59 | }
60 | .ng-wind-table-page-view {
61 | @apply flex items-center font-normal text-gray-500 mb-4 md:mb-0 w-full md:w-auto;
62 | }
63 |
64 | .ng-wind-page-btn {
65 | @apply flex items-center justify-center px-2 h-7 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100;
66 | }
67 |
68 | .page-number {
69 | @apply flex items-center justify-center px-3 h-7 leading-tight text-gray-500 border border-gray-300;
70 | }
71 | .active-page {
72 | @apply bg-blue-100 hover:bg-blue-100 hover:text-blue-700;
73 | }
74 | .ng-wind-page-prev {
75 | @apply rounded-s-md ng-wind-page-btn;
76 | }
77 | .ng-wind-page-next {
78 | @apply rounded-e-md ng-wind-page-btn;
79 | }
80 | .page-number-show-dropdown:focus {
81 | border: 0 !important;
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/_core/interceptors/errors.interceptor.ts:
--------------------------------------------------------------------------------
1 | import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
2 | import {Inject, Injectable} from "@angular/core";
3 | import {catchError, Observable, retry, throwError, timer} from "rxjs";
4 | import {NOTYF} from "../../shared/utils/notyf.token";
5 | import {Notyf} from "notyf";
6 | import {IError} from "../../shared/interfaces/error.interface";
7 |
8 | @Injectable()
9 | export class ErrorsInterceptor implements HttpInterceptor {
10 | constructor(@Inject(NOTYF) private notyf: Notyf) {
11 | }
12 |
13 | intercept(request: HttpRequest
7 |
25 |
9 |
14 |
15 |
16 |
24 | 17 | Deactivate account 18 |
19 |
20 |
23 | Are you sure you want to deactivate your account? All 21 | of your data will be permanently removed. This action cannot be undone.
22 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/layouts/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AfterViewInit,
3 | Component,
4 | ElementRef,
5 | EventEmitter,
6 | OnDestroy,
7 | OnInit,
8 | Output,
9 | ViewEncapsulation
10 | } from '@angular/core';
11 | import { NavigationEnd, Router } from '@angular/router';
12 | import { Subscription } from 'rxjs';
13 | import { CommonService } from 'src/app/_core/services/common.service';
14 | import { AppRoutes } from 'src/app/app.routes';
15 | import { AdminRoutes, ElementRoutes, SettingRoutes } from '../../admin.routes';
16 |
17 | @Component({
18 | selector: 'app-sidebar',
19 | templateUrl: './sidebar.component.html',
20 | styleUrls: ['./sidebar.component.css'],
21 | encapsulation: ViewEncapsulation.None
22 | })
23 |
24 | export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
25 | sidebarIsCollapsed: boolean = true;
26 | readonly appRoutes = AppRoutes;
27 | readonly adminRoutes = AdminRoutes;
28 | readonly settingRoutes = SettingRoutes;
29 | readonly elementRoutes = ElementRoutes;
30 | private routerSubscription: Subscription = new Subscription();
31 |
32 | @Output() sidebarCollapsed = new EventEmitter
3 |
10 |
41 |
11 |
32 |
40 |
12 |
19 |
14 | Announcing our next round of funding. Read more
17 |
18 |
20 |
31 | Data to enrich your online business 21 |
22 |Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure 23 | qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
24 |
25 | Dashboard
27 | Learn more
29 |
30 |
34 |
35 |
36 |
72 |
38 |
71 |
39 |
40 | Your Company
41 | 
42 |
43 |
50 |
51 |
52 |
70 |
53 |
64 |
69 |
65 | Login
66 |
67 |
68 |
3 |
4 |
66 |
5 |
65 |
6 |
9 |
10 |
11 |
14 |
15 |
16 |
64 |
17 |
21 |
26 |
27 |
22 |
25 | johndoe
23 |Administrator
24 |
28 |
63 |
29 |
43 |
44 |
31 | 
32 |
33 |
34 |
42 |
35 | John Doe
36 |
37 |
38 |
39 |
40 | john.deo@email.com
41 |
45 |
46 |
47 | Profile
48 |
49 |
50 |
51 | Help Center
52 |
53 |
54 |
55 |
56 |
61 |
62 |
2 |
--------------------------------------------------------------------------------
/src/app/public/auth/signup/signup.component.html:
--------------------------------------------------------------------------------
1 |
3 |
83 |
4 |
75 |
82 | 5 | Get Started Now 6 |
7 | 8 |Enter your credentials to access your account
9 | 10 |
11 |
16 |
17 |
18 |
26 |
27 |
19 |
20 |
21 | 20 |
or
22 |
23 |
24 |
25 | 24 |
71 |
74 | Don't have any account? Sign up now!
73 |
2 |
--------------------------------------------------------------------------------
/docs/runtime.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"runtime.js","mappings":";;;;UAAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;UAEA;UACA;;;;;WCzBA;WACA;WACA;WACA;WACA,+BAA+B,wCAAwC;WACvE;WACA;WACA;WACA;WACA,iBAAiB,qBAAqB;WACtC;WACA;WACA,kBAAkB,qBAAqB;WACvC;WACA;WACA,KAAK;WACL;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;;;;WC3BA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;WAEA;WACA;WACA;WACA;WACA;WACA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,MAAM,qBAAqB;WAC3B;WACA;WACA;WACA;WACA;WACA;WACA;WACA;;WAEA;WACA;WACA","sources":["webpack/bootstrap","webpack/runtime/chunk loaded","webpack/runtime/define property getters","webpack/runtime/hasOwnProperty shorthand","webpack/runtime/make namespace object","webpack/runtime/jsonp chunk loading","webpack/before-startup","webpack/startup","webpack/after-startup"],"sourcesContent":["// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = (result, chunkIds, fn, priority) => {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar [chunkIds, fn, priority] = deferred[i];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t\"runtime\": 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkngwind\"] = self[\"webpackChunkngwind\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","","",""],"names":[],"sourceRoot":"webpack:///","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
--------------------------------------------------------------------------------
/src/app/admin/views/elements/alert/admin-alert.component.html:
--------------------------------------------------------------------------------
1 |
3 |
89 |
4 |
81 |
88 | 5 | Get Started Now 6 |
7 |Enter your credentials to create your account
8 |
9 |
14 |
15 |
16 |
24 |
71 |
17 |
18 |
19 | 18 |
or
20 |
21 |
22 |
23 | 22 |
72 |
80 | 73 | Already have an account? 74 | 75 | Sign in 76 | 77 | instead. 78 |
79 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/layouts/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
1 |
112 |
113 |
3 |
7 |
11 |
12 |
13 |
17 |
18 |
19 |
23 |
24 |
25 |
29 |
30 |
31 |
32 |
4 |
6 | Basic Alerts
5 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 8 | blanditiis 9 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
10 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 14 | blanditiis 15 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
16 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 20 | blanditiis 21 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
22 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 26 | blanditiis 27 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
28 |
33 |
37 |
41 |
42 |
43 |
47 |
48 |
49 |
53 |
54 |
55 |
59 |
60 |
61 |
34 |
36 | Dismissable Alerts
35 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 38 | blanditiis 39 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
40 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 44 | blanditiis 45 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
46 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 50 | blanditiis 51 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
52 |Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 56 | blanditiis 57 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis?
58 |
62 |
66 |
76 |
77 |
78 |
88 |
89 |
90 |
100 |
101 |
102 |
112 |
113 |
63 |
65 | Alerts With Icons
64 |67 | 68 | Success 69 |
70 |71 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 72 | blanditiis 73 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis? 74 |
75 |79 | 80 | Danger 81 |
82 |83 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 84 | blanditiis 85 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis? 86 |
87 |91 | 92 | Info 93 |
94 |95 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 96 | blanditiis 97 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis? 98 |
99 |103 | 104 | Warning 105 |
106 |107 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti repellendus porro nam, natus 108 | blanditiis 109 | quibusdam mollitia! Ipsam perferendis sint error laudantium eos atque aut nobis? 110 |
111 |
114 |
122 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
2 |
3 | @import "tailwindcss/base";
4 | @import "tailwindcss/components";
5 | @import "tailwindcss/utilities";
6 |
7 | @layer components {
8 | * {
9 | font-family: "Inter", sans-serif !important;
10 | -webkit-font-smoothing: antialiased;
11 | padding: 0;
12 | margin: 0;
13 | box-sizing: border-box;
14 | }
15 |
16 | /* Text color */
17 | .text-light {
18 | @apply text-slate-400;
19 | }
20 |
21 | /* Text size */
22 | .text-2xs {
23 | font-size: 0.5rem !important;
24 | }
25 |
26 | /* buttons utility */
27 | .btn {
28 | @apply px-5 py-2 text-sm font-medium rounded-lg text-center transition-colors duration-300 border;
29 | }
30 |
31 | button:disabled {
32 | @apply opacity-80;
33 | }
34 |
35 | /* button sizes */
36 |
37 | .btn-xs {
38 | @apply px-3 py-2 text-xs;
39 | }
40 |
41 | .btn-sm {
42 | @apply px-3 py-2 text-sm;
43 | }
44 |
45 | .btn-lg {
46 | @apply px-5 py-3 text-sm;
47 | }
48 |
49 | .btn-xl {
50 | @apply px-6 py-3.5 text-sm;
51 | }
52 |
53 | /* fill buttons type */
54 | .btn-text {
55 | @apply transition duration-150 ease-in-out;
56 | }
57 |
58 | .btn-theme {
59 | @apply bg-emerald-700 border-emerald-700 text-white hover:bg-emerald-800 hover:border-emerald-800;
60 | }
61 |
62 | .btn-theme:focus {
63 | @apply outline-none ring-2 bg-emerald-600 ring-offset-1;
64 | }
65 |
66 | .btn-primary {
67 | @apply bg-blue-700 border-blue-700 text-white hover:bg-blue-800 hover:border-blue-800;
68 | }
69 |
70 | .btn-info {
71 | @apply bg-indigo-700 border-indigo-700 text-white hover:bg-indigo-800 hover:border-indigo-800;
72 | }
73 |
74 | .btn-success {
75 | @apply bg-green-700 border-green-700 text-white hover:bg-green-800 hover:border-green-800;
76 | }
77 |
78 | .btn-danger {
79 | @apply bg-red-700 border-red-700 text-white hover:bg-red-800 hover:border-red-800;
80 | }
81 |
82 | .btn-warning {
83 | @apply bg-yellow-600 border-yellow-600 text-white hover:bg-yellow-700 hover:border-yellow-700;
84 | }
85 |
86 | .btn-secondary {
87 | @apply bg-slate-700 border-slate-700 text-white hover:bg-slate-800 hover:border-slate-800;
88 | }
89 |
90 | /* outline buttons type */
91 |
92 | .btn-outline-primary {
93 | @apply border bg-transparent border-blue-700 text-blue-700 hover:bg-blue-700 hover:text-white;
94 | }
95 |
96 | .btn-outline-info {
97 | @apply border bg-transparent border-indigo-700 text-indigo-700 hover:bg-indigo-700 hover:text-white;
98 | }
99 |
100 | .btn-outline-success {
101 | @apply border bg-transparent border-green-700 text-green-700 hover:bg-green-700 hover:text-white;
102 | }
103 |
104 | .btn-outline-danger {
105 | @apply border bg-transparent border-red-700 text-red-700 hover:bg-red-700 hover:text-white;
106 | }
107 |
108 | .btn-outline-warning {
109 | @apply border bg-transparent border-yellow-600 text-yellow-600 hover:bg-yellow-600 hover:text-white;
110 | }
111 |
112 | .btn-outline-secondary {
113 | @apply border bg-transparent border-slate-700 text-slate-700 hover:bg-slate-700 hover:text-white;
114 | }
115 |
116 | /* icon with button */
117 | .btn-icon {
118 | @apply inline-flex items-center;
119 | }
120 |
121 | /* Card */
122 | .card {
123 | @apply py-2 px-4 mb-4 h-full bg-white rounded-xl shadow-md shadow-gray-200;
124 | }
125 |
126 | .card-title {
127 | @apply text-gray-900;
128 | }
129 |
130 | /* Input */
131 | .input {
132 | @apply transition-all duration-100 ease-in-out focus:ring-1 focus:ring-inset focus:ring-emerald-600;
133 | }
134 |
135 | .form-check {
136 | @apply flex items-center mb-4;
137 | }
138 | .form-check-input {
139 | @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500;
140 | }
141 | .form-check-label {
142 | @apply ms-2 text-sm font-medium text-gray-900;
143 | }
144 | .form-switch {
145 | @apply relative inline-flex items-center mb-5 cursor-pointer;
146 | }
147 | .form-input-switch {
148 | @apply w-10 h-5 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:w-4 after:h-4 after:transition-all peer-checked:bg-blue-600;
149 | }
150 |
151 | .form-group {
152 | @apply flex flex-col gap-y-0.5 mb-3;
153 | }
154 |
155 | .form-label-sm {
156 | @apply text-xs;
157 | }
158 | .form-label {
159 | @apply block mb-1 text-sm font-medium text-gray-900;
160 | }
161 | .form-label-lg {
162 | @apply text-lg;
163 | }
164 |
165 | .form-control {
166 | @apply py-2 px-3 block w-full border border-gray-200 text-gray-900 text-sm rounded-md !outline-none input;
167 | }
168 | .form-control-sm {
169 | @apply !py-1.5 !px-3 block w-full border border-gray-200 text-gray-900 text-sm rounded-[5px] !outline-none input;
170 | }
171 | .form-control-lg {
172 | @apply !py-3 !px-3 block w-full border border-gray-200 text-gray-900 text-sm rounded-lg !outline-none input;
173 | }
174 |
175 | .form-select {
176 | @apply py-2 px-2 block w-full border border-gray-200 text-gray-900 text-sm rounded-md !outline-none input;
177 | }
178 | .form-input-icon {
179 | @apply absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none;
180 | }
181 | label.required::after {
182 | content: "*";
183 | @apply ml-[3px] text-red-500;
184 | }
185 |
186 | .file-upload {
187 | @apply block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer focus:outline-none;
188 | }
189 |
190 | input[type="file"]::file-selector-button {
191 | @apply border-0 py-2 px-4 bg-blue-700 text-white hover:bg-blue-600 cursor-pointer transition-colors;
192 | }
193 | }
194 |
195 | /*Additional Global Css Overrides*/
196 | .notyf__toast {
197 | max-width: 50em !important;
198 | }
199 |
200 | .notyf__toast .notyf__ripple {
201 | height: 60em !important;
202 | width: 60em !important;
203 | }
204 |
205 | .notyf__message {
206 | font-size: 0.875rem !important;
207 | }
208 |
--------------------------------------------------------------------------------
/docs/runtime.js:
--------------------------------------------------------------------------------
1 | /******/ (() => { // webpackBootstrap
2 | /******/ "use strict";
3 | /******/ var __webpack_modules__ = ({});
4 | /************************************************************************/
5 | /******/ // The module cache
6 | /******/ var __webpack_module_cache__ = {};
7 | /******/
8 | /******/ // The require function
9 | /******/ function __webpack_require__(moduleId) {
10 | /******/ // Check if module is in cache
11 | /******/ var cachedModule = __webpack_module_cache__[moduleId];
12 | /******/ if (cachedModule !== undefined) {
13 | /******/ return cachedModule.exports;
14 | /******/ }
15 | /******/ // Create a new module (and put it into the cache)
16 | /******/ var module = __webpack_module_cache__[moduleId] = {
17 | /******/ // no module.id needed
18 | /******/ // no module.loaded needed
19 | /******/ exports: {}
20 | /******/ };
21 | /******/
22 | /******/ // Execute the module function
23 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
24 | /******/
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 | /******/
29 | /******/ // expose the modules object (__webpack_modules__)
30 | /******/ __webpack_require__.m = __webpack_modules__;
31 | /******/
32 | /************************************************************************/
33 | /******/ /* webpack/runtime/chunk loaded */
34 | /******/ (() => {
35 | /******/ var deferred = [];
36 | /******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
37 | /******/ if(chunkIds) {
38 | /******/ priority = priority || 0;
39 | /******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
40 | /******/ deferred[i] = [chunkIds, fn, priority];
41 | /******/ return;
42 | /******/ }
43 | /******/ var notFulfilled = Infinity;
44 | /******/ for (var i = 0; i < deferred.length; i++) {
45 | /******/ var [chunkIds, fn, priority] = deferred[i];
46 | /******/ var fulfilled = true;
47 | /******/ for (var j = 0; j < chunkIds.length; j++) {
48 | /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
49 | /******/ chunkIds.splice(j--, 1);
50 | /******/ } else {
51 | /******/ fulfilled = false;
52 | /******/ if(priority < notFulfilled) notFulfilled = priority;
53 | /******/ }
54 | /******/ }
55 | /******/ if(fulfilled) {
56 | /******/ deferred.splice(i--, 1)
57 | /******/ var r = fn();
58 | /******/ if (r !== undefined) result = r;
59 | /******/ }
60 | /******/ }
61 | /******/ return result;
62 | /******/ };
63 | /******/ })();
64 | /******/
65 | /******/ /* webpack/runtime/define property getters */
66 | /******/ (() => {
67 | /******/ // define getter functions for harmony exports
68 | /******/ __webpack_require__.d = (exports, definition) => {
69 | /******/ for(var key in definition) {
70 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
71 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
72 | /******/ }
73 | /******/ }
74 | /******/ };
75 | /******/ })();
76 | /******/
77 | /******/ /* webpack/runtime/hasOwnProperty shorthand */
78 | /******/ (() => {
79 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
80 | /******/ })();
81 | /******/
82 | /******/ /* webpack/runtime/make namespace object */
83 | /******/ (() => {
84 | /******/ // define __esModule on exports
85 | /******/ __webpack_require__.r = (exports) => {
86 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
87 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
88 | /******/ }
89 | /******/ Object.defineProperty(exports, '__esModule', { value: true });
90 | /******/ };
91 | /******/ })();
92 | /******/
93 | /******/ /* webpack/runtime/jsonp chunk loading */
94 | /******/ (() => {
95 | /******/ // no baseURI
96 | /******/
97 | /******/ // object to store loaded and loading chunks
98 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
99 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
100 | /******/ var installedChunks = {
101 | /******/ "runtime": 0
102 | /******/ };
103 | /******/
104 | /******/ // no chunk on demand loading
105 | /******/
106 | /******/ // no prefetching
107 | /******/
108 | /******/ // no preloaded
109 | /******/
110 | /******/ // no HMR
111 | /******/
112 | /******/ // no HMR manifest
113 | /******/
114 | /******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
115 | /******/
116 | /******/ // install a JSONP callback for chunk loading
117 | /******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
118 | /******/ var [chunkIds, moreModules, runtime] = data;
119 | /******/ // add "moreModules" to the modules object,
120 | /******/ // then flag all "chunkIds" as loaded and fire callback
121 | /******/ var moduleId, chunkId, i = 0;
122 | /******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
123 | /******/ for(moduleId in moreModules) {
124 | /******/ if(__webpack_require__.o(moreModules, moduleId)) {
125 | /******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
126 | /******/ }
127 | /******/ }
128 | /******/ if(runtime) var result = runtime(__webpack_require__);
129 | /******/ }
130 | /******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
131 | /******/ for(;i < chunkIds.length; i++) {
132 | /******/ chunkId = chunkIds[i];
133 | /******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
134 | /******/ installedChunks[chunkId][0]();
135 | /******/ }
136 | /******/ installedChunks[chunkId] = 0;
137 | /******/ }
138 | /******/ return __webpack_require__.O(result);
139 | /******/ }
140 | /******/
141 | /******/ var chunkLoadingGlobal = self["webpackChunkngwind"] = self["webpackChunkngwind"] || [];
142 | /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
143 | /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
144 | /******/ })();
145 | /******/
146 | /************************************************************************/
147 | /******/
148 | /******/
149 | /******/ })()
150 | ;
151 | //# sourceMappingURL=runtime.js.map
--------------------------------------------------------------------------------
/src/app/shared/components/data-table/data-table.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/views/elements/buttons/buttons.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | Table
4 |
6 |
119 |
7 |
118 |
8 |
79 |
117 |
9 |
10 |
11 |
77 |
78 | | 13 | Product name 14 | 17 | 20 | | 21 |22 | Color 23 | | 24 |25 | Category 26 | | 27 |28 | Price 29 | | 30 |31 | Action 32 | | 33 |
|---|---|---|---|---|
| 58 | {{product?.name}} 59 | | 60 |61 | {{product?.color}} 62 | | 63 |64 | {{product?.category}} 65 | | 66 |67 | {{product?.price}} 68 | | 69 |70 | Edit 71 | | 72 |
2 |
--------------------------------------------------------------------------------
/src/app/admin/views/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
1 |
3 |
27 |
4 |
6 | Fill buttons
5 |
7 |
10 |
13 |
16 |
19 |
22 |
25 |
26 |
28 |
47 |
29 |
31 | Buttons sizes
30 |
32 |
35 |
38 |
41 |
44 |
45 |
46 |
48 |
72 |
49 |
51 | Outlines buttons
50 |
52 |
55 |
58 |
61 |
64 |
67 |
70 |
71 |
73 |
95 |
74 |
76 | Buttons with icon
75 |
77 |
85 |
93 |
94 |
96 |
127 |
97 |
99 | Loader
98 |
100 |
112 |
125 |
126 |
2 |
3 |
40 |
41 |
42 |
43 |
44 |
77 |
78 |
79 |
80 |
81 |
179 |
180 |
--------------------------------------------------------------------------------
/src/app/admin/views/elements/forms/forms.component.html:
--------------------------------------------------------------------------------
1 |
4 |
12 |
5 |
6 |
7 |
8 |
11 | 25
9 |Total Events
10 |
13 |
21 |
14 |
15 |
16 |
17 |
20 | 2560+
18 |Total Ticket Sold
19 |
22 |
30 |
23 |
24 |
25 |
26 |
29 | 5000+
27 |Total Registration
28 |
31 |
39 |
32 |
33 |
34 |
35 |
38 | $8000
36 |Total Revenue
37 |
45 |
57 |
46 |
48 | Area Wise Sale
47 |
49 |
56 |
50 |
51 |
52 |
53 | Chart Data
54 |
55 |
58 |
76 | 59 | Ticket Sold Today 60 |
61 |62 | 63 | 278 64 | piece 65 |
66 |67 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae incidunt officiis veritatis, 68 | architecto nam soluta, exercitationem minima laudantium harum qui. 69 |
70 | 71 | 72 | View Details 73 | 74 | 75 |
82 |
121 |
122 |
83 |
88 | Latest Customers
84 | 85 | View all 86 | 87 |
89 |
120 | -
90 |
-
91 | 92 |107 |93 |95 |
94 |
96 |103 |97 | John Doe 98 |
99 |100 | john.deo@email.com 101 |
102 |104 | ${{i}} 105 |106 |
108 |
111 |
119 |
112 |
115 |
116 | View Sales Report
117 |
118 | Total
113 | 6 of 300 114 |
123 |
178 |
124 |
126 | Upcoming Events
125 |
127 |
177 |
128 |
172 |
129 | 
130 |
132 |
133 |
134 |
148 | 135 | Envato International Online Meetup 2020 136 |
137 |California, USA
138 |139 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint ipsa vero illum quos vitae 140 | dolorum, earum 141 | recusandae est modi ea possimus nihil aspernatur 142 | libero unde itaque error quis, sit tenetur esse quam harum corrupti! Quia, tenetur provident, 143 | vero, recusandae 144 | aliquam possimus at mollitia quo perspiciatis 145 | adipisci in? Odio, impedit cumque. 146 |
147 |
149 |
171 |
150 |
156 |
152 |
153 |
154 | $200
155 |
157 |
163 |
159 |
160 |
161 | 150 pcs left
162 |
164 |
170 |
166 |
167 |
168 | {{eventDate}}
169 |
173 |
174 | loading...
175 |
176 |
2 |
3 |
23 |
4 |
6 | Input Sizes
5 |
7 |
21 |
22 |
24 |
42 |
25 |
27 | Select input
26 |
28 |
40 |
41 |
43 |
69 |
44 |
46 | Input element with icon
45 |
47 |
66 |
67 |
68 |
70 |
82 |
71 |
73 | Textarea
72 |
74 |
80 |
81 |
83 |
98 |
84 |
86 | File upload
85 |
87 |
96 |
97 |
99 |
125 |
100 |
102 | Checkbox
101 |
103 |
124 |
104 |
105 |
107 |
108 |
109 |
110 |
112 |
113 |
114 |
115 |
117 |
118 |
119 |
120 |
122 |
123 |
126 |
156 |
127 |
129 | Radio buttons
128 |
130 |
155 |
131 |
132 |
135 |
136 |
137 |
138 |
141 |
142 |
143 |
144 |
147 |
148 |
149 |
150 |
153 |
154 |
157 |
169 |
158 |
160 | Toggle Switch
159 |
161 |
167 |
168 |
170 |
--------------------------------------------------------------------------------
171 |
173 | Full form
172 |
174 |
232 |
233 |
234 |