Update to new structure
This commit is contained in:
Çetin
parent
12bc4574d2
commit
af7e863f4d
32
.gitignore
vendored
32
.gitignore
vendored
@ -1,20 +1,18 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
# Node
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
@ -22,25 +20,25 @@ chrome-profiler-events*.json
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
# Visual Studio Code
|
||||
.vscode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Compiled files
|
||||
theme.css
|
||||
layout.css
|
||||
src/assets/layout/styles/theme/designer
|
||||
|
||||
10
CHANGELOG.md
Normal file
10
CHANGELOG.md
Normal file
@ -0,0 +1,10 @@
|
||||
# Changelog
|
||||
|
||||
## 13.2.0
|
||||
|
||||
- Folder structure updated.
|
||||
- Replace app.config.service by layout.service.
|
||||
- Updated to PrimeNG 14.
|
||||
- Strict mode support added.
|
||||
- Documentation updated.
|
||||
- Added max-width in large screens for landing.
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sakai-ng",
|
||||
"version": "13.1.1",
|
||||
"version": "13.2.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
@ -20,9 +20,9 @@
|
||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||
"@angular/router": "~13.0.0",
|
||||
"chart.js": "^3.3.2",
|
||||
"primeflex": "^3.1.0",
|
||||
"primeflex": "^3.2.0",
|
||||
"primeicons": "5.0.0",
|
||||
"primeng": "^13.1.0",
|
||||
"primeng": "13.4.0",
|
||||
"prismjs": "1.9.0",
|
||||
"rxjs": "~7.4.0",
|
||||
"tslib": "^2.3.0",
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
export interface AppConfig {
|
||||
inputStyle?: string;
|
||||
dark?: boolean;
|
||||
theme?: string;
|
||||
ripple?: boolean;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
export interface Image {
|
||||
previewImageSrc?;
|
||||
thumbnailImageSrc?;
|
||||
alt?;
|
||||
title?;
|
||||
}
|
||||
@ -1,71 +1,27 @@
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { FormLayoutComponent } from './components/formlayout/formlayout.component';
|
||||
import { PanelsComponent } from './components/panels/panels.component';
|
||||
import { OverlaysComponent } from './components/overlays/overlays.component';
|
||||
import { MediaComponent } from './components/media/media.component';
|
||||
import { MessagesComponent } from './components/messages/messages.component';
|
||||
import { MiscComponent } from './components/misc/misc.component';
|
||||
import { EmptyComponent } from './components/empty/empty.component';
|
||||
import { ChartsComponent } from './components/charts/charts.component';
|
||||
import { FileComponent } from './components/file/file.component';
|
||||
import { DocumentationComponent } from './components/documentation/documentation.component';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
import { InputComponent } from './components/input/input.component';
|
||||
import { ButtonComponent } from './components/button/button.component';
|
||||
import { TableComponent } from './components/table/table.component';
|
||||
import { ListComponent } from './components/list/list.component';
|
||||
import { TreeComponent } from './components/tree/tree.component';
|
||||
import { CrudComponent } from './components/crud/crud.component';
|
||||
import { BlocksComponent } from './components/blocks/blocks.component';
|
||||
import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
|
||||
import { InvalidStateComponent } from './components/invalidstate/invalidstate.component';
|
||||
import { TimelineComponent } from './components/timeline/timeline.component';
|
||||
import { IconsComponent } from './components/icons/icons.component';
|
||||
import { LandingComponent } from './components/landing/landing.component';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
import { ErrorComponent } from './components/error/error.component';
|
||||
import { NotfoundComponent } from './components/notfound/notfound.component';
|
||||
import { AccessComponent } from './components/access/access.component';
|
||||
import { NotfoundComponent } from './demo/components/notfound/notfound.component';
|
||||
import { AppLayoutComponent } from "./layout/app.layout.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot([
|
||||
{
|
||||
path: '', component: AppMainComponent,
|
||||
path: '', component: AppLayoutComponent,
|
||||
children: [
|
||||
{path: '', component: DashboardComponent},
|
||||
{path: 'uikit/formlayout', component: FormLayoutComponent},
|
||||
{path: 'uikit/input', component: InputComponent},
|
||||
{path: 'uikit/floatlabel', component: FloatLabelComponent},
|
||||
{path: 'uikit/invalidstate', component: InvalidStateComponent},
|
||||
{path: 'uikit/button', component: ButtonComponent},
|
||||
{path: 'uikit/table', component: TableComponent},
|
||||
{path: 'uikit/list', component: ListComponent},
|
||||
{path: 'uikit/tree', component: TreeComponent},
|
||||
{path: 'uikit/panel', component: PanelsComponent},
|
||||
{path: 'uikit/overlay', component: OverlaysComponent},
|
||||
{path: 'uikit/media', component: MediaComponent},
|
||||
{path: 'uikit/menu', loadChildren: () => import('./components/menus/menus.module').then(m => m.MenusModule)},
|
||||
{path: 'uikit/message', component: MessagesComponent},
|
||||
{path: 'uikit/misc', component: MiscComponent},
|
||||
{path: 'uikit/charts', component: ChartsComponent},
|
||||
{path: 'uikit/file', component: FileComponent},
|
||||
{path: 'pages/crud', component: CrudComponent},
|
||||
{path: 'pages/timeline', component: TimelineComponent},
|
||||
{path: 'pages/empty', component: EmptyComponent},
|
||||
{path: 'icons', component: IconsComponent},
|
||||
{path: 'blocks', component: BlocksComponent},
|
||||
{path: 'documentation', component: DocumentationComponent}
|
||||
{ path: '', loadChildren: () => import('./demo/components/dashboard/dashboard.module').then(m => m.DashboardModule) },
|
||||
{ path: 'uikit', loadChildren: () => import('./demo/components/uikit/uikit.module').then(m => m.UikitModule) },
|
||||
{ path: 'utilities', loadChildren: () => import('./demo/components/utilities/utilities.module').then(m => m.UtilitiesModule) },
|
||||
{ path: 'documentation', loadChildren: () => import('./demo/components/documentation/documentation.module').then(m => m.DocumentationModule) },
|
||||
{ path: 'blocks', loadChildren: () => import('./demo/components/primeblocks/primeblocks.module').then(m => m.PrimeBlocksModule) },
|
||||
{ path: 'pages', loadChildren: () => import('./demo/components/pages/pages.module').then(m => m.PagesModule) },
|
||||
],
|
||||
},
|
||||
{path:'pages/landing', component: LandingComponent},
|
||||
{path:'pages/login', component: LoginComponent},
|
||||
{path:'pages/error', component: ErrorComponent},
|
||||
{path:'pages/notfound', component: NotfoundComponent},
|
||||
{path:'pages/access', component: AccessComponent},
|
||||
{path: '**', redirectTo: 'pages/notfound'},
|
||||
], {scrollPositionRestoration: 'enabled', anchorScrolling:'enabled'})
|
||||
{ path: 'auth', loadChildren: () => import('./demo/components/auth/auth.module').then(m => m.AuthModule) },
|
||||
{ path: 'landing', loadChildren: () => import('./demo/components/landing/landing.module').then(m => m.LandingModule) },
|
||||
{ path: 'pages/notfound', component: NotfoundComponent },
|
||||
{ path: '**', redirectTo: 'pages/notfound' },
|
||||
], { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' })
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
/* tslint:disable:no-unused-variable */
|
||||
|
||||
import {async, TestBed} from '@angular/core/testing';
|
||||
import {RouterTestingModule} from '@angular/router/testing';
|
||||
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {AppComponent} from './app.component';
|
||||
import {AppMainComponent} from './app.main.component';
|
||||
import {AppMenuComponent} from './app.menu.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [NoopAnimationsModule, RouterTestingModule],
|
||||
declarations: [AppComponent,
|
||||
AppMainComponent,
|
||||
AppMenuComponent
|
||||
]
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
@ -1,242 +0,0 @@
|
||||
<div id="layout-config" class="layout-config" [ngClass]="{'layout-config-active': appMain.configActive}" (click)="appMain.onConfigClick($event)">
|
||||
<a style="cursor: pointer" id="layout-config-button" class="layout-config-button" (click)="onConfigButtonClick($event)">
|
||||
<i class="pi pi-cog"></i>
|
||||
</a>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text layout-config-close" (click)="onConfigButtonClick($event)"></button>
|
||||
<div class="layout-config-content">
|
||||
<h6 class="mt-0">Component Scale</h6>
|
||||
<div class="config-scale">
|
||||
<button pButton pRipple type="button" icon="pi pi-minus" (click)="decrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[0]"></button>
|
||||
<i *ngFor="let item of scales" class="pi pi-circle-fill" [ngClass]="{'scale-active': item === scale}"></i>
|
||||
<button pButton pRipple type="button" icon="pi pi-plus" (click)="incrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[scales.length - 1]"></button>
|
||||
</div>
|
||||
|
||||
<h6>Input Style</h6>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
|
||||
inputId="inputStyle1"></p-radioButton>
|
||||
<label for="inputStyle1">Outlined</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
|
||||
inputId="inputStyle2"></p-radioButton>
|
||||
<label for="inputStyle2">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Ripple Effect</h6>
|
||||
<p-inputSwitch [ngModel]="config.ripple" (onChange)="onRippleChange($event.checked)"></p-inputSwitch>
|
||||
|
||||
<h6>Menu Type</h6>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="static" [(ngModel)]="app.menuMode" (onClick)="appMain.isStatic()"
|
||||
inputId="menuType1" ></p-radioButton>
|
||||
<label for="menuType1">Static</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="menuType" value="overlay" [(ngModel)]="app.menuMode" (onClick)="appMain.isOverlay()"
|
||||
inputId="menuType2"></p-radioButton>
|
||||
<label for="menuType2">Overlay</label>
|
||||
</div>
|
||||
|
||||
<h6>Bootstrap</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('bootstrap4-light-blue', false)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('bootstrap4-light-purple', false)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('bootstrap4-dark-blue', true)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('bootstrap4-dark-purple', true)">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Material Design</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('md-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('md-light-deeppurple', false)">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('md-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('md-dark-deeppurple', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Material Design Compact</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('mdc-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('mdc-light-deeppurple', false)">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('mdc-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('mdc-dark-deeppurple', true)">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Tailwind</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('tailwind-light', false)">
|
||||
<img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>Fluent UI</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('fluent-light', false)">
|
||||
<img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>PrimeOne Design - 2022</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-light-indigo', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-light-blue', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-light-purple', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-light-teal', false)">
|
||||
<img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-dark-indigo', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-dark-blue', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-dark-purple', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('lara-dark-teal', true)">
|
||||
<img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6>PrimeOne Design - 2021</h6>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('saga-blue', false)">
|
||||
<img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('saga-green', false)">
|
||||
<img src="assets/layout/images/themes/saga-green.png" alt="Saga Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('saga-orange', false)">
|
||||
<img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('saga-purple', false)">
|
||||
<img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('vela-blue', true)">
|
||||
<img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('vela-green', true)">
|
||||
<img src="assets/layout/images/themes/vela-green.png" alt="Vela Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('vela-orange', true)">
|
||||
<img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('vela-purple', true)">
|
||||
<img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('arya-blue', true)">
|
||||
<img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('arya-green', true)">
|
||||
<img src="assets/layout/images/themes/arya-green.png" alt="Arya Green">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('arya-orange', true)">
|
||||
<img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange">
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<button class="p-link" (click)="changeTheme('arya-purple', true)">
|
||||
<img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,75 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AppConfig } from './api/appconfig';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
import { ConfigService } from './service/app.config.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-config',
|
||||
templateUrl: './app.config.component.html'
|
||||
})
|
||||
export class AppConfigComponent implements OnInit, OnDestroy {
|
||||
|
||||
scale: number = 14;
|
||||
|
||||
scales: any[] = [12, 13, 14, 15, 16];
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public app: AppComponent, public appMain: AppMainComponent, public configService: ConfigService, public primengConfig: PrimeNGConfig) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
this.scale = 14;
|
||||
|
||||
this.applyScale();
|
||||
});
|
||||
}
|
||||
|
||||
onConfigButtonClick(event) {
|
||||
this.appMain.configActive = !this.appMain.configActive;
|
||||
this.appMain.configClick = true;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
incrementScale() {
|
||||
this.scale++;
|
||||
this.applyScale();
|
||||
}
|
||||
|
||||
decrementScale() {
|
||||
this.scale--;
|
||||
this.applyScale();
|
||||
}
|
||||
|
||||
applyScale() {
|
||||
document.documentElement.style.fontSize = this.scale + 'px';
|
||||
}
|
||||
|
||||
onRippleChange(ripple) {
|
||||
this.primengConfig.ripple = ripple;
|
||||
this.configService.updateConfig({...this.config, ...{ripple}});
|
||||
}
|
||||
|
||||
onInputStyleChange() {
|
||||
this.configService.updateConfig(this.config);
|
||||
}
|
||||
|
||||
changeTheme(theme:string, dark:boolean){
|
||||
let themeElement = document.getElementById('theme-css');
|
||||
themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
|
||||
this.configService.updateConfig({...this.config, ...{theme, dark}});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<div class="layout-footer">
|
||||
<img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeNG</span>
|
||||
</div>
|
||||
@ -1,10 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
templateUrl: './app.footer.component.html'
|
||||
})
|
||||
export class AppFooterComponent{
|
||||
constructor(public appMain: AppMainComponent) {}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<div class="layout-wrapper" [ngClass]="{'layout-overlay':isOverlay(),
|
||||
'layout-static':isStatic(),
|
||||
'layout-theme-light':!config.dark,
|
||||
'layout-theme-dark':config.dark,
|
||||
'layout-overlay-sidebar-active': overlayMenuActive,
|
||||
'layout-static-sidebar-inactive': staticMenuInactive,
|
||||
'layout-mobile-sidebar-active':menuActiveMobile,
|
||||
'p-ripple-disabled': !config.ripple, 'p-input-filled': config.inputStyle === 'filled'}">
|
||||
<app-topbar></app-topbar>
|
||||
<div class="layout-sidebar">
|
||||
<app-menu></app-menu>
|
||||
</div>
|
||||
<div class="layout-main-container">
|
||||
<div class="layout-main">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
<app-config></app-config>
|
||||
<div *ngIf="menuActiveMobile" class="layout-mask p-component-overlay"></div>
|
||||
</div>
|
||||
@ -1,182 +0,0 @@
|
||||
import { Component, AfterViewInit, OnDestroy, Renderer2, OnInit } from '@angular/core';
|
||||
import { trigger, state, style, transition, animate } from '@angular/animations';
|
||||
import { AppComponent } from './app.component';
|
||||
import { ConfigService } from './service/app.config.service';
|
||||
import { AppConfig } from './api/appconfig';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main',
|
||||
templateUrl: './app.main.component.html',
|
||||
animations: [
|
||||
trigger('submenu', [
|
||||
state('hidden', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('visible', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
|
||||
public menuInactiveDesktop: boolean;
|
||||
|
||||
public menuActiveMobile: boolean;
|
||||
|
||||
public overlayMenuActive: boolean;
|
||||
|
||||
public staticMenuInactive: boolean = false;
|
||||
|
||||
public profileActive: boolean;
|
||||
|
||||
public topMenuActive: boolean;
|
||||
|
||||
public topMenuLeaving: boolean;
|
||||
|
||||
public theme: string;
|
||||
|
||||
documentClickListener: () => void;
|
||||
|
||||
menuClick: boolean;
|
||||
|
||||
topMenuButtonClick: boolean;
|
||||
|
||||
configActive: boolean;
|
||||
|
||||
configClick: boolean;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public renderer: Renderer2, public app: AppComponent, public configService: ConfigService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => this.config = config);
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// hides the overlay menu and top menu if outside is clicked
|
||||
this.documentClickListener = this.renderer.listen('body', 'click', (event) => {
|
||||
if (!this.isDesktop()) {
|
||||
if (!this.menuClick) {
|
||||
this.menuActiveMobile = false;
|
||||
}
|
||||
|
||||
if (!this.topMenuButtonClick) {
|
||||
this.hideTopMenu();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!this.menuClick && this.isOverlay()) {
|
||||
this.menuInactiveDesktop = true;
|
||||
}
|
||||
if (!this.menuClick){
|
||||
this.overlayMenuActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.configActive && !this.configClick) {
|
||||
this.configActive = false;
|
||||
}
|
||||
|
||||
this.configClick = false;
|
||||
this.menuClick = false;
|
||||
this.topMenuButtonClick = false;
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu(event: Event) {
|
||||
this.menuClick = true;
|
||||
|
||||
if (this.isDesktop()) {
|
||||
if (this.app.menuMode === 'overlay') {
|
||||
if(this.menuActiveMobile === true) {
|
||||
this.overlayMenuActive = true;
|
||||
}
|
||||
|
||||
this.overlayMenuActive = !this.overlayMenuActive;
|
||||
this.menuActiveMobile = false;
|
||||
}
|
||||
else if (this.app.menuMode === 'static') {
|
||||
this.staticMenuInactive = !this.staticMenuInactive;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.menuActiveMobile = !this.menuActiveMobile;
|
||||
this.topMenuActive = false;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
toggleProfile(event: Event) {
|
||||
this.profileActive = !this.profileActive;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
toggleTopMenu(event: Event) {
|
||||
this.topMenuButtonClick = true;
|
||||
this.menuActiveMobile = false;
|
||||
|
||||
if (this.topMenuActive) {
|
||||
this.hideTopMenu();
|
||||
} else {
|
||||
this.topMenuActive = true;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
hideTopMenu() {
|
||||
this.topMenuLeaving = true;
|
||||
setTimeout(() => {
|
||||
this.topMenuActive = false;
|
||||
this.topMenuLeaving = false;
|
||||
}, 1);
|
||||
}
|
||||
|
||||
onMenuClick() {
|
||||
this.menuClick = true;
|
||||
}
|
||||
|
||||
onConfigClick(event) {
|
||||
this.configClick = true;
|
||||
}
|
||||
|
||||
isStatic() {
|
||||
return this.app.menuMode === 'static';
|
||||
}
|
||||
|
||||
isOverlay() {
|
||||
return this.app.menuMode === 'overlay';
|
||||
}
|
||||
|
||||
isDesktop() {
|
||||
return window.innerWidth > 992;
|
||||
}
|
||||
|
||||
isMobile(){
|
||||
return window.innerWidth < 1024;
|
||||
}
|
||||
|
||||
onSearchClick() {
|
||||
this.topMenuButtonClick = true;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.documentClickListener) {
|
||||
this.documentClickListener();
|
||||
}
|
||||
|
||||
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,146 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
template: `
|
||||
<div class="layout-menu-container">
|
||||
<ul class="layout-menu" role="menu" (keydown)="onKeydown($event)">
|
||||
<li app-menu class="layout-menuitem-category" *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true" role="none">
|
||||
<div class="layout-menuitem-root-text" [attr.aria-label]="item.label">{{item.label}}</div>
|
||||
<ul role="menu">
|
||||
<li app-menuitem *ngFor="let child of item.items" [item]="child" [index]="i" role="none"></li>
|
||||
</ul>
|
||||
</li>
|
||||
<a href="https://www.primefaces.org/primeblocks-ng/#/">
|
||||
<img src="assets/layout/images/{{appMain.config.dark ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AppMenuComponent implements OnInit {
|
||||
|
||||
model: any[];
|
||||
|
||||
constructor(public appMain: AppMainComponent) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.model = [
|
||||
{
|
||||
label: 'Home',
|
||||
items:[
|
||||
{label: 'Dashboard',icon: 'pi pi-fw pi-home', routerLink: ['/']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
|
||||
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
|
||||
{label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
|
||||
{label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
|
||||
{label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
|
||||
{label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
|
||||
{label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
|
||||
{label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']},
|
||||
{label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
|
||||
{label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
|
||||
{label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']},
|
||||
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'], preventExact: true},
|
||||
{label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
|
||||
{label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
|
||||
{label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']},
|
||||
{label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Prime Blocks',
|
||||
items:[
|
||||
{label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'},
|
||||
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng'], target: '_blank'},
|
||||
]
|
||||
},
|
||||
{label:'Utilities',
|
||||
items:[
|
||||
{label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']},
|
||||
{label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: ['https://www.primefaces.org/primeflex/'], target: '_blank'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
items: [
|
||||
{label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']},
|
||||
{label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
|
||||
{label: 'Landing', icon: 'pi pi-fw pi-globe', routerLink: ['pages/landing']},
|
||||
{label: 'Login', icon: 'pi pi-fw pi-sign-in', routerLink: ['pages/login']},
|
||||
{label: 'Error', icon: 'pi pi-fw pi-times-circle', routerLink: ['pages/error']},
|
||||
{label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['pages/notfound']},
|
||||
{label: 'Access Denied', icon: 'pi pi-fw pi-lock', routerLink: ['pages/access']},
|
||||
{label: 'Empty', icon: 'pi pi-fw pi-circle', routerLink: ['/pages/empty']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'},
|
||||
{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'},
|
||||
{label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'},
|
||||
{label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Get Started',
|
||||
items:[
|
||||
{
|
||||
label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
|
||||
},
|
||||
{
|
||||
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-ng'], target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
onKeydown(event: KeyboardEvent) {
|
||||
const nodeElement = (<HTMLDivElement> event.target);
|
||||
if (event.code === 'Enter' || event.code === 'Space') {
|
||||
nodeElement.click();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,152 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { MenuService } from './service/app.menu.service';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
|
||||
@Component({
|
||||
/* tslint:disable:component-selector */
|
||||
selector: '[app-menuitem]',
|
||||
/* tslint:enable:component-selector */
|
||||
template: `
|
||||
<ng-container>
|
||||
<a [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.class"
|
||||
*ngIf="(!item.routerLink || item.items) && item.visible !== false"
|
||||
[attr.target]="item.target" [attr.tabindex]="0" [attr.aria-label]="item.label" role="menuitem" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false" [ngClass]="item.class"
|
||||
[routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink router-link-exact-active"
|
||||
[routerLinkActiveOptions]="{exact: !item.preventExact}" [attr.target]="item.target" [attr.tabindex]="0" [attr.aria-label]="item.label" role="menuitem" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<span class="p-tag p-badge ml-auto" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')" role="menu">
|
||||
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass" role="none"></li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-container>
|
||||
`,
|
||||
host: {
|
||||
'[class.active-menuitem]': 'active',
|
||||
},
|
||||
animations: [
|
||||
trigger('children', [
|
||||
state('void', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('hiddenAnimated', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('visibleAnimated', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
||||
transition('void => visibleAnimated, visibleAnimated => void',
|
||||
animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppMenuitemComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() item: any;
|
||||
|
||||
@Input() index: number;
|
||||
|
||||
@Input() root: boolean;
|
||||
|
||||
@Input() parentKey: string;
|
||||
|
||||
active = false;
|
||||
|
||||
menuSourceSubscription: Subscription;
|
||||
|
||||
menuResetSubscription: Subscription;
|
||||
|
||||
key: string;
|
||||
|
||||
constructor(public app: AppMainComponent, public router: Router, private cd: ChangeDetectorRef, private menuService: MenuService) {
|
||||
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(key => {
|
||||
// deactivate current active menu
|
||||
if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
|
||||
this.active = false;
|
||||
});
|
||||
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe(params => {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
} else {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
|
||||
this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
|
||||
}
|
||||
|
||||
updateActiveStateFromRoute() {
|
||||
this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
|
||||
}
|
||||
|
||||
itemClick(event: Event) {
|
||||
event.stopPropagation();
|
||||
// avoid processing disabled items
|
||||
if (this.item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// notify other items
|
||||
this.menuService.onMenuStateChange(this.key);
|
||||
|
||||
// execute command
|
||||
if (this.item.command) {
|
||||
this.item.command({originalEvent: event, item: this.item});
|
||||
}
|
||||
|
||||
// toggle active state
|
||||
if (this.item.items) {
|
||||
this.active = !this.active;
|
||||
} else {
|
||||
// activate item
|
||||
this.active = true;
|
||||
|
||||
// hide overlay menus
|
||||
this.app.menuActiveMobile = false;
|
||||
|
||||
if (this.app.isDesktop() && this.app.isOverlay()) {
|
||||
this.app.menuInactiveDesktop = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.menuSourceSubscription) {
|
||||
this.menuSourceSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (this.menuResetSubscription) {
|
||||
this.menuResetSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,283 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { AccordionModule } from 'primeng/accordion';
|
||||
import { AutoCompleteModule } from 'primeng/autocomplete';
|
||||
import { AvatarModule } from 'primeng/avatar';
|
||||
import { AvatarGroupModule } from 'primeng/avatargroup';
|
||||
import { BadgeModule } from 'primeng/badge';
|
||||
import { BreadcrumbModule } from 'primeng/breadcrumb';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CalendarModule } from 'primeng/calendar';
|
||||
import { CardModule } from 'primeng/card';
|
||||
import { CarouselModule } from 'primeng/carousel';
|
||||
import { CascadeSelectModule } from 'primeng/cascadeselect';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { ChipsModule } from 'primeng/chips';
|
||||
import { CodeHighlighterModule } from 'primeng/codehighlighter';
|
||||
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
||||
import { ConfirmPopupModule } from 'primeng/confirmpopup';
|
||||
import { ColorPickerModule } from 'primeng/colorpicker';
|
||||
import { ContextMenuModule } from 'primeng/contextmenu';
|
||||
import { DataViewModule } from 'primeng/dataview';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FieldsetModule } from 'primeng/fieldset';
|
||||
import { FileUploadModule } from 'primeng/fileupload';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { ImageModule } from 'primeng/image';
|
||||
import { InplaceModule } from 'primeng/inplace';
|
||||
import { InputNumberModule } from 'primeng/inputnumber';
|
||||
import { InputMaskModule } from 'primeng/inputmask';
|
||||
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
import { KnobModule } from 'primeng/knob';
|
||||
import { LightboxModule } from 'primeng/lightbox';
|
||||
import { ListboxModule } from 'primeng/listbox';
|
||||
import { MegaMenuModule } from 'primeng/megamenu';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
import { MenubarModule } from 'primeng/menubar';
|
||||
import { MessagesModule } from 'primeng/messages';
|
||||
import { MessageModule } from 'primeng/message';
|
||||
import { MultiSelectModule } from 'primeng/multiselect';
|
||||
import { OrderListModule } from 'primeng/orderlist';
|
||||
import { OrganizationChartModule } from 'primeng/organizationchart';
|
||||
import { OverlayPanelModule } from 'primeng/overlaypanel';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import { PanelModule } from 'primeng/panel';
|
||||
import { PanelMenuModule } from 'primeng/panelmenu';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { PickListModule } from 'primeng/picklist';
|
||||
import { ProgressBarModule } from 'primeng/progressbar';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { ScrollPanelModule } from 'primeng/scrollpanel';
|
||||
import { ScrollTopModule } from 'primeng/scrolltop';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { SidebarModule } from 'primeng/sidebar';
|
||||
import { SkeletonModule } from 'primeng/skeleton';
|
||||
import { SlideMenuModule } from 'primeng/slidemenu';
|
||||
import { SliderModule } from 'primeng/slider';
|
||||
import { SplitButtonModule } from 'primeng/splitbutton';
|
||||
import { SplitterModule } from 'primeng/splitter';
|
||||
import { StepsModule } from 'primeng/steps';
|
||||
import { TabMenuModule } from 'primeng/tabmenu';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { TabViewModule } from 'primeng/tabview';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { TerminalModule } from 'primeng/terminal';
|
||||
import { TieredMenuModule } from 'primeng/tieredmenu';
|
||||
import { TimelineModule } from 'primeng/timeline';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { ToolbarModule } from 'primeng/toolbar';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
import { TreeModule } from 'primeng/tree';
|
||||
import { TreeSelectModule } from 'primeng/treeselect';
|
||||
import { TreeTableModule } from 'primeng/treetable';
|
||||
import { VirtualScrollerModule } from 'primeng/virtualscroller';
|
||||
import { BlockViewer } from './components/blockviewer/blockviewer.component';
|
||||
|
||||
import { AppCodeModule } from './components/app-code/app.code.component';
|
||||
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
import { AppTopBarComponent } from './app.topbar.component';
|
||||
import { AppFooterComponent } from './app.footer.component';
|
||||
import { AppConfigComponent } from './app.config.component';
|
||||
import { AppMenuComponent } from './app.menu.component';
|
||||
import { AppMenuitemComponent } from './app.menuitem.component';
|
||||
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { FormLayoutComponent } from './components/formlayout/formlayout.component';
|
||||
import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
|
||||
import { InvalidStateComponent } from './components/invalidstate/invalidstate.component';
|
||||
import { InputComponent } from './components/input/input.component';
|
||||
import { ButtonComponent } from './components/button/button.component';
|
||||
import { TableComponent } from './components/table/table.component';
|
||||
import { ListComponent } from './components/list/list.component';
|
||||
import { TreeComponent } from './components/tree/tree.component';
|
||||
import { PanelsComponent } from './components/panels/panels.component';
|
||||
import { OverlaysComponent } from './components/overlays/overlays.component';
|
||||
import { MediaComponent } from './components/media/media.component';
|
||||
import { MenusComponent } from './components/menus/menus.component';
|
||||
import { MessagesComponent } from './components/messages/messages.component';
|
||||
import { MiscComponent } from './components/misc/misc.component';
|
||||
import { EmptyComponent } from './components/empty/empty.component';
|
||||
import { ChartsComponent } from './components/charts/charts.component';
|
||||
import { FileComponent } from './components/file/file.component';
|
||||
import { DocumentationComponent } from './components/documentation/documentation.component';
|
||||
import { CrudComponent } from './components/crud/crud.component';
|
||||
import { TimelineComponent } from './components/timeline/timeline.component';
|
||||
import { IconsComponent } from './components/icons/icons.component';
|
||||
import { BlocksComponent } from './components/blocks/blocks.component';
|
||||
import { PaymentComponent} from './components/menus/payment.component';
|
||||
import { ConfirmationComponent } from './components/menus/confirmation.component';
|
||||
import { PersonalComponent } from './components/menus/personal.component';
|
||||
import { SeatComponent } from './components/menus/seat.component';
|
||||
import { LandingComponent } from './components/landing/landing.component';
|
||||
|
||||
import { CountryService } from './service/countryservice';
|
||||
import { CustomerService } from './service/customerservice';
|
||||
import { EventService } from './service/eventservice';
|
||||
import { IconService } from './service/iconservice';
|
||||
import { NodeService } from './service/nodeservice';
|
||||
import { PhotoService } from './service/photoservice';
|
||||
import { ProductService } from './service/productservice';
|
||||
import { MenuService } from './service/app.menu.service';
|
||||
import { ConfigService } from './service/app.config.service';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
import { ErrorComponent } from './components/error/error.component';
|
||||
import { NotfoundComponent } from './components/notfound/notfound.component';
|
||||
import { AccessComponent } from './components/access/access.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppLayoutModule } from './layout/app.layout.module';
|
||||
import { NotfoundComponent } from './demo/components/notfound/notfound.component';
|
||||
import { ProductService } from './demo/service/product.service';
|
||||
import { CountryService } from './demo/service/country.service';
|
||||
import { CustomerService } from './demo/service/customer.service';
|
||||
import { EventService } from './demo/service/event.service';
|
||||
import { IconService } from './demo/service/icon.service';
|
||||
import { NodeService } from './demo/service/node.service';
|
||||
import { PhotoService } from './demo/service/photo.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
AccordionModule,
|
||||
AutoCompleteModule,
|
||||
AvatarModule,
|
||||
AvatarGroupModule,
|
||||
BadgeModule,
|
||||
BreadcrumbModule,
|
||||
ButtonModule,
|
||||
CalendarModule,
|
||||
CardModule,
|
||||
CarouselModule,
|
||||
CascadeSelectModule,
|
||||
ChartModule,
|
||||
CheckboxModule,
|
||||
ChipsModule,
|
||||
ChipModule,
|
||||
CodeHighlighterModule,
|
||||
ConfirmDialogModule,
|
||||
ConfirmPopupModule,
|
||||
ColorPickerModule,
|
||||
ContextMenuModule,
|
||||
DataViewModule,
|
||||
DialogModule,
|
||||
DividerModule,
|
||||
DropdownModule,
|
||||
FieldsetModule,
|
||||
FileUploadModule,
|
||||
GalleriaModule,
|
||||
ImageModule,
|
||||
InplaceModule,
|
||||
InputNumberModule,
|
||||
InputMaskModule,
|
||||
InputSwitchModule,
|
||||
InputTextModule,
|
||||
InputTextareaModule,
|
||||
KnobModule,
|
||||
LightboxModule,
|
||||
ListboxModule,
|
||||
MegaMenuModule,
|
||||
MenuModule,
|
||||
MenubarModule,
|
||||
MessageModule,
|
||||
MessagesModule,
|
||||
MultiSelectModule,
|
||||
OrderListModule,
|
||||
OrganizationChartModule,
|
||||
OverlayPanelModule,
|
||||
PaginatorModule,
|
||||
PanelModule,
|
||||
PanelMenuModule,
|
||||
PasswordModule,
|
||||
PickListModule,
|
||||
ProgressBarModule,
|
||||
RadioButtonModule,
|
||||
RatingModule,
|
||||
RippleModule,
|
||||
ScrollPanelModule,
|
||||
ScrollTopModule,
|
||||
SelectButtonModule,
|
||||
SidebarModule,
|
||||
SkeletonModule,
|
||||
SlideMenuModule,
|
||||
SliderModule,
|
||||
SplitButtonModule,
|
||||
SplitterModule,
|
||||
StepsModule,
|
||||
TagModule,
|
||||
TableModule,
|
||||
TabMenuModule,
|
||||
TabViewModule,
|
||||
TerminalModule,
|
||||
TieredMenuModule,
|
||||
TimelineModule,
|
||||
ToastModule,
|
||||
ToggleButtonModule,
|
||||
ToolbarModule,
|
||||
TooltipModule,
|
||||
TreeModule,
|
||||
TreeSelectModule,
|
||||
TreeTableModule,
|
||||
VirtualScrollerModule,
|
||||
AppCodeModule,
|
||||
StyleClassModule,
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AppMainComponent,
|
||||
AppTopBarComponent,
|
||||
AppFooterComponent,
|
||||
AppConfigComponent,
|
||||
AppMenuComponent,
|
||||
AppMenuitemComponent,
|
||||
DashboardComponent,
|
||||
FormLayoutComponent,
|
||||
FloatLabelComponent,
|
||||
InvalidStateComponent,
|
||||
InputComponent,
|
||||
ButtonComponent,
|
||||
TableComponent,
|
||||
ListComponent,
|
||||
TreeComponent,
|
||||
PanelsComponent,
|
||||
OverlaysComponent,
|
||||
MenusComponent,
|
||||
MessagesComponent,
|
||||
MessagesComponent,
|
||||
MiscComponent,
|
||||
ChartsComponent,
|
||||
EmptyComponent,
|
||||
FileComponent,
|
||||
IconsComponent,
|
||||
DocumentationComponent,
|
||||
CrudComponent,
|
||||
TimelineComponent,
|
||||
BlocksComponent,
|
||||
BlockViewer,
|
||||
MediaComponent,
|
||||
PaymentComponent,
|
||||
ConfirmationComponent,
|
||||
PersonalComponent,
|
||||
SeatComponent,
|
||||
LandingComponent,
|
||||
LoginComponent,
|
||||
ErrorComponent,
|
||||
NotfoundComponent,
|
||||
AccessComponent,
|
||||
AppComponent, NotfoundComponent
|
||||
],
|
||||
imports: [
|
||||
AppRoutingModule,
|
||||
AppLayoutModule
|
||||
],
|
||||
providers: [
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy},
|
||||
{ provide: LocationStrategy, useClass: HashLocationStrategy },
|
||||
CountryService, CustomerService, EventService, IconService, NodeService,
|
||||
PhotoService, ProductService, MenuService, ConfigService
|
||||
PhotoService, ProductService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<div class="layout-topbar">
|
||||
<a class="layout-topbar-logo" routerLink="">
|
||||
<img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
|
||||
<span>SAKAI</span>
|
||||
</a>
|
||||
|
||||
<a class="p-link layout-menu-button layout-topbar-button" href="#" (click)="appMain.toggleMenu($event)">
|
||||
<i class="pi pi-bars"></i>
|
||||
</a>
|
||||
|
||||
<a class="p-link layout-topbar-menu-button layout-topbar-button" href="#" (click)="appMain.toggleTopMenu($event)">
|
||||
<i class="pi pi-ellipsis-v"></i>
|
||||
</a>
|
||||
|
||||
<div class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active':appMain.topMenuActive}">
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-cog"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a href="#" class="p-link layout-topbar-button">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { AppMainComponent } from './app.main.component';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
selector: 'app-topbar',
|
||||
templateUrl: './app.topbar.component.html'
|
||||
})
|
||||
export class AppTopBarComponent {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
constructor(public appMain: AppMainComponent) { }
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-access',
|
||||
templateUrl: './access.component.html',
|
||||
})
|
||||
export class AccessComponent {}
|
||||
@ -1,407 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './blocks.component.html'
|
||||
})
|
||||
export class BlocksComponent{
|
||||
|
||||
block1: string = `
|
||||
<div class="grid grid-nogutter surface-section text-800">
|
||||
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
|
||||
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 overflow-hidden">
|
||||
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block2: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
|
||||
<div class="mb-3 font-bold text-2xl">
|
||||
<span class="text-900">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Built for Developers</div>
|
||||
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Easy to Use</div>
|
||||
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
|
||||
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Open Source</div>
|
||||
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
|
||||
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block3: string = `
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
|
||||
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$9</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$29</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$49</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block4: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-700 text-center">
|
||||
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
|
||||
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block5: string = `
|
||||
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
|
||||
<div class="font-bold mr-8">🔥 Hot Deals!</div>
|
||||
<div class="align-items-center hidden lg:flex">
|
||||
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex align-items-center ml-2 mr-8">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>`;
|
||||
|
||||
block6: string = `
|
||||
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
|
||||
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
|
||||
<li>
|
||||
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-500 line-height-3"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-900 line-height-3">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-900">Customers</div>
|
||||
<div class="flex align-items-center text-700 flex-wrap">
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block7: string = `
|
||||
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block8: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
|
||||
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" pInputText class="w-full mb-3">
|
||||
|
||||
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
|
||||
<input id="password1" type="password" pInputText class="w-full mb-3">
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-6">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block9: string = `
|
||||
<div class="surface-section">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
|
||||
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
|
||||
<p-chip label="Crime" class="mr-2"></p-chip>
|
||||
<p-chip label="Drama" class="mr-2"></p-chip>
|
||||
<p-chip label="Thriller"></p-chip>
|
||||
</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
block10: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
|
||||
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
|
||||
</div>`;
|
||||
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './button.component.html'
|
||||
})
|
||||
export class ButtonComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
loading = [false, false, false, false]
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{label: 'Update', icon: 'pi pi-refresh'},
|
||||
{label: 'Delete', icon: 'pi pi-times'},
|
||||
{label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'},
|
||||
{separator: true},
|
||||
{label: 'Setup', icon: 'pi pi-cog'}
|
||||
];
|
||||
}
|
||||
|
||||
load(index) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => this.loading[index] = false, 1000);
|
||||
}
|
||||
}
|
||||
@ -1,374 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AppConfig } from 'src/app/api/appconfig';
|
||||
import { ConfigService } from 'src/app/service/app.config.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './charts.component.html'
|
||||
})
|
||||
export class ChartsComponent implements OnInit, OnDestroy {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
this.updateChartOptions();
|
||||
});
|
||||
|
||||
this.lineData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.barData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: '#2f4860',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: '#00bb7e',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.polarData = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3,
|
||||
14
|
||||
],
|
||||
backgroundColor: [
|
||||
"#FF6384",
|
||||
"#4BC0C0",
|
||||
"#FFCE56",
|
||||
"#E7E9ED",
|
||||
"#36A2EB"
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Grey",
|
||||
"Blue"
|
||||
]
|
||||
};
|
||||
|
||||
this.radarData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.updateChartOptions();
|
||||
}
|
||||
|
||||
updateChartOptions() {
|
||||
if (this.config.dark)
|
||||
this.applyDarkTheme();
|
||||
else
|
||||
this.applyLightTheme();
|
||||
}
|
||||
|
||||
applyLightTheme() {
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
applyDarkTheme() {
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,131 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
|
||||
@Component({
|
||||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
items: MenuItem[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
chartData: any;
|
||||
|
||||
chartOptions: any;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
constructor(private productService: ProductService, public configService: ConfigService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
this.updateChartOptions();
|
||||
});
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
|
||||
this.items = [
|
||||
{label: 'Add New', icon: 'pi pi-fw pi-plus'},
|
||||
{label: 'Remove', icon: 'pi pi-fw pi-minus'}
|
||||
];
|
||||
|
||||
this.chartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: '#2f4860',
|
||||
borderColor: '#2f4860',
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: '#00bb7e',
|
||||
borderColor: '#00bb7e',
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
updateChartOptions() {
|
||||
if (this.config.dark)
|
||||
this.applyDarkTheme();
|
||||
else
|
||||
this.applyLightTheme();
|
||||
|
||||
}
|
||||
|
||||
applyDarkTheme() {
|
||||
this.chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#ebedef'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(160, 167, 181, .3)',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
applyLightTheme() {
|
||||
this.chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef',
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card docs">
|
||||
<h3>Current Version</h3>
|
||||
<p>Angular 13 and PrimeNG 13</p>
|
||||
|
||||
<h4>Getting Started</h4>
|
||||
<p>Sakai is an application template for Angular and is distributed as a CLI project. In case CLI is not installed already, use
|
||||
the command below to set it up.
|
||||
</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install -g @angular/cli
|
||||
</app-code>
|
||||
|
||||
<p>Once CLI is ready in your system, clone the github repository, cd to the directory,
|
||||
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
git clone https://github.com/primefaces/sakai-ng.git
|
||||
cd sakai-ng
|
||||
npm install
|
||||
ng serve
|
||||
</app-code>
|
||||
|
||||
<p>The application should run at <i>http://localhost:4200/</i>, you may now start with the development of your application.</p>
|
||||
|
||||
<h5>Important CLI Commands</h5>
|
||||
<p>Following commands are derived from CLI.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
||||
|
||||
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
|
||||
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
Run 'ng help' for more options.
|
||||
</app-code>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies of PrimeNG templates is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
|
||||
|
||||
<h4>Structure</h4>
|
||||
<p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
|
||||
required resources for the layout are placed inside the <i>src/assets/layout</i> folder and similarly theme resources are inside <i>src/assets/theme</i> folder.
|
||||
</p>
|
||||
|
||||
<h5>Application Template</h5>
|
||||
<p>Main layout is the html template of the app.main.component.ts, it is divided into a couple of sections such as topbar, sidebar, right panel and footer. Here is the code for
|
||||
the main template. The component class app.main.component.ts implements the logic such as opening menus and managing layout modes.
|
||||
</p>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
|
||||
navigate to this file and define your own model as a nested structure. Here is the menu component from the sample application.</p>
|
||||
|
||||
<h5>Theme</h5>
|
||||
<p>Sakai layout derives the color scheme from the PrimeNG theme being used so that it can be combined any theme such as PrimeOne, Material, Bootstrap and others with dark mode alternatives.</p>
|
||||
|
||||
<h5>SASS Variables</h5>
|
||||
<p>In case you'd like to customize the layout variables, open <i>_variables.scss</i> file under src/assets/sass/layout folder. Saving the changes
|
||||
will be reflected instantly at your browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './empty.component.html'
|
||||
})
|
||||
export class EmptyComponent {}
|
||||
@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
templateUrl: './error.component.html',
|
||||
})
|
||||
export class ErrorComponent {}
|
||||
@ -1,21 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './file.component.html',
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileComponent {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
constructor(private messageService: MessageService) {}
|
||||
|
||||
onUpload(event) {
|
||||
for (const file of event.files) {
|
||||
this.uploadedFiles.push(file);
|
||||
}
|
||||
|
||||
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
|
||||
}
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
<div class="card">
|
||||
<h4>Icons</h4>
|
||||
|
||||
<h5>Download</h5>
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
npm install primeicons --save
|
||||
</app-code>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>.
|
||||
A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: .5rem"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
|
||||
<h5>Size</h5>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>Spinning Animation</h5>
|
||||
<p>Special pi-spin class applies infinite rotate to an icon.</p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>List of Icons</h5>
|
||||
<p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
|
||||
<div>
|
||||
<input class="icon-filter" (input)="onFilter($event)" pInputText placeholder="Search an icon" class="w-full p-3 mt-3 mb-5 w-full p-3 mt-3 mb-5">
|
||||
</div>
|
||||
|
||||
<div class="grid text-center">
|
||||
<div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" *ngFor="let icon of filteredIcons">
|
||||
<i class="text-2xl pi pi-{{icon.properties.name}}"></i>
|
||||
<div>pi-{{icon.properties.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,52 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconService } from '../../service/iconservice';
|
||||
|
||||
@Component({
|
||||
selector: 'app-iconsdemo',
|
||||
templateUrl: './icons.component.html'
|
||||
})
|
||||
export class IconsComponent implements OnInit {
|
||||
|
||||
icons: any[];
|
||||
|
||||
filteredIcons: any[];
|
||||
|
||||
selectedIcon: any;
|
||||
|
||||
constructor(private iconService : IconService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.iconService.getIcons().subscribe(data => {
|
||||
data = data.filter(value => {
|
||||
return value.icon.tags.indexOf('deprecate') === -1;
|
||||
});
|
||||
|
||||
let icons = data;
|
||||
icons.sort((icon1, icon2) => {
|
||||
if(icon1.properties.name < icon2.properties.name)
|
||||
return -1;
|
||||
else if(icon1.properties.name < icon2.properties.name)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.icons = icons;
|
||||
this.filteredIcons = data;
|
||||
});
|
||||
}
|
||||
|
||||
onFilter(event: KeyboardEvent): void {
|
||||
const searchText = (event.target as HTMLInputElement).value;
|
||||
|
||||
if (!searchText) {
|
||||
this.filteredIcons = this.icons;
|
||||
}
|
||||
else {
|
||||
this.filteredIcons = this.icons.filter( it => {
|
||||
return it.icon.tags[0].includes(searchText);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,128 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from '../../service/countryservice';
|
||||
import { NodeService } from '../../service/nodeservice';
|
||||
import { SelectItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './input.component.html',
|
||||
styles: [`:host ::ng-deep .p-multiselect {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .p-multiselect-label, {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item img.flag {
|
||||
width: 18px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-placeholder {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
`]
|
||||
})
|
||||
export class InputComponent implements OnInit{
|
||||
countries: any[];
|
||||
|
||||
filteredCountries: any[];
|
||||
|
||||
selectedCountryAdvanced: any[];
|
||||
|
||||
valSlider = 50;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string;
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean;
|
||||
|
||||
cities: SelectItem[];
|
||||
|
||||
selectedList: SelectItem;
|
||||
|
||||
selectedDrop: SelectItem;
|
||||
|
||||
selectedMulti: string[] = [];
|
||||
|
||||
treeSelectNodes: any[];
|
||||
|
||||
selectedNode: SelectItem;
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[];
|
||||
|
||||
valSelect1: string;
|
||||
|
||||
valSelect2: string;
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
selectedDate:any;
|
||||
|
||||
constructor(private countryService: CountryService, private nodeService: NodeService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
|
||||
this.cities = [
|
||||
{label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
|
||||
{label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
|
||||
{label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
|
||||
{label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
|
||||
{label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
|
||||
];
|
||||
|
||||
this.paymentOptions = [
|
||||
{name: 'Option 1', value: 1},
|
||||
{name: 'Option 2', value: 2},
|
||||
{name: 'Option 3', value: 3}
|
||||
];
|
||||
|
||||
this.nodeService.getFiles().then(files => this.treeSelectNodes = files)
|
||||
}
|
||||
|
||||
filterCountry(event) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
@ -1,357 +0,0 @@
|
||||
<div id="home" class="surface-0 overflow-hidden">
|
||||
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
|
||||
<a class="flex align-items-center" href="#">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
|
||||
</a>
|
||||
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</a>
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:92%">
|
||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
|
||||
<button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" class="grid py-4 px-4 lg:px-8 relative">
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
||||
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
|
||||
</div>
|
||||
<img src="assets/layout/images/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 text-center mt-8 mb-4">
|
||||
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||
<span class="text-600">Semper risus in hendrerit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Privacy</h5>
|
||||
<span class="text-600">Neque egestas congue quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
|
||||
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
||||
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
|
||||
<img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="Company logo">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius:8px;">
|
||||
<img src="assets/layout/images/mockup.svg" class="w-11" alt="mockup mobile">
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
|
||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid my-8 pt-2 md:pt-8">
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width:4.2rem; height:4.2rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
|
||||
<img src="assets/layout/images/mockup-desktop.svg" class="w-11" alt="mockup">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="assets/layout/images/free.svg" class="w-10 h-10 mx-auto" alt="free">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="assets/layout/images/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="assets/layout/images/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||
<div class="grid justify-content-between">
|
||||
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
|
||||
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-10 lg:col-7">
|
||||
<div class="grid text-center md:text-left">
|
||||
<div class="col-12 md:col-3">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,83 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Router } from '@angular/router';
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
templateUrl: './landing.component.html',
|
||||
styles: [`
|
||||
#hero{
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
||||
height:700px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pricing-card:hover{
|
||||
border:2px solid var(--cyan-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#hero{
|
||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||
clip-path: ellipse(150% 87% at 93% 13%);
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px){
|
||||
#hero > img {
|
||||
position: absolute;
|
||||
transform:scale(1.2);
|
||||
top:15%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px){
|
||||
#hero {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#hero > img {
|
||||
position:static;
|
||||
transform: scale(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#hero > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingComponent implements OnInit, OnDestroy {
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService, public router: Router) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if(this.subscription){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { SelectItem } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['../../../assets/demo/badges.scss']
|
||||
})
|
||||
export class ListComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
sortOptions: SelectItem[];
|
||||
|
||||
sortOrder: number;
|
||||
|
||||
sortField: string;
|
||||
|
||||
sourceCities: any[];
|
||||
|
||||
targetCities: any[];
|
||||
|
||||
orderCities: any[];
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.sourceCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
this.targetCities = [];
|
||||
|
||||
this.orderCities = [
|
||||
{name: 'San Francisco', code: 'SF'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Paris', code: 'PRS'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Berlin', code: 'BRL'},
|
||||
{name: 'Barcelona', code: 'BRC'},
|
||||
{name: 'Rome', code: 'RM'}];
|
||||
|
||||
this.sortOptions = [
|
||||
{label: 'Price High to Low', value: '!price'},
|
||||
{label: 'Price Low to High', value: 'price'}
|
||||
];
|
||||
}
|
||||
|
||||
onSortChange(event) {
|
||||
const value = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
} else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ConfigService } from '../../service/app.config.service';
|
||||
import { AppConfig } from '../../api/appconfig';
|
||||
import { Subscription } from 'rxjs';
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styles:[`
|
||||
:host ::ng-deep .p-password input {
|
||||
width: 100%;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye-slash{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LoginComponent implements OnInit, OnDestroy {
|
||||
|
||||
valCheck: string[] = ['remember'];
|
||||
|
||||
password: string;
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
subscription: Subscription;
|
||||
|
||||
constructor(public configService: ConfigService){ }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.config = this.configService.config;
|
||||
this.subscription = this.configService.configUpdate$.subscribe(config => {
|
||||
this.config = config;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if(this.subscription){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { PhotoService } from '../../service/photoservice';
|
||||
import { Product } from '../../api/product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-media',
|
||||
templateUrl: './media.component.html',
|
||||
styleUrls: ['../../../assets/demo/badges.scss'],
|
||||
styles:[`
|
||||
:host ::ng-deep .p-carousel-indicators .p-link{
|
||||
border-radius:5px !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MediaComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
images: any[];
|
||||
|
||||
galleriaResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
];
|
||||
|
||||
carouselResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private productService: ProductService, private photoService: PhotoService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => {
|
||||
this.products = products;
|
||||
});
|
||||
|
||||
this.photoService.getImages().then(images => {
|
||||
this.images = images;
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-check mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ConfirmationComponent {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { PaymentComponent } from './payment.component';
|
||||
import { SeatComponent } from './seat.component';
|
||||
import { PersonalComponent } from './personal.component';
|
||||
import { ConfirmationComponent } from './confirmation.component';
|
||||
import { MenusComponent } from './menus.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([
|
||||
{path:'',component: MenusComponent, children:[
|
||||
{path:'', redirectTo: 'personal', pathMatch: 'full'},
|
||||
{path: 'personal', component: PersonalComponent},
|
||||
{path: 'confirmation', component: ConfirmationComponent},
|
||||
{path: 'seat', component: SeatComponent},
|
||||
{path: 'payment', component: PaymentComponent}
|
||||
]}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MenusModule { }
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PaymentComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-personal',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
|
||||
<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PersonalComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-seat',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class SeatComponent{
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './misc.component.html',
|
||||
})
|
||||
export class MiscComponent implements OnInit {
|
||||
|
||||
value = 0;
|
||||
|
||||
ngOnInit() {
|
||||
const interval = setInterval(() => {
|
||||
this.value = this.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (this.value >= 100) {
|
||||
this.value = 100;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notfound',
|
||||
templateUrl: './notfound.component.html',
|
||||
})
|
||||
export class NotfoundComponent {}
|
||||
@ -1,145 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef } from '@angular/core';
|
||||
import { Customer, Representative } from '../../api/customer';
|
||||
import { CustomerService } from '../../service/customerservice';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { Table } from 'primeng/table';
|
||||
import { MessageService, ConfirmationService } from 'primeng/api'
|
||||
|
||||
@Component({
|
||||
templateUrl: './table.component.html',
|
||||
providers: [MessageService, ConfirmationService],
|
||||
styleUrls: ['../../../assets/demo/badges.scss'],
|
||||
styles: [`
|
||||
:host ::ng-deep .p-frozen-column {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-datatable-frozen-tbody {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-progressbar {
|
||||
height:.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class TableComponent implements OnInit {
|
||||
|
||||
customers1: Customer[];
|
||||
|
||||
customers2: Customer[];
|
||||
|
||||
customers3: Customer[];
|
||||
|
||||
selectedCustomers1: Customer[];
|
||||
|
||||
selectedCustomer: Customer;
|
||||
|
||||
representatives: Representative[];
|
||||
|
||||
statuses: any[];
|
||||
|
||||
products: Product[];
|
||||
|
||||
rowGroupMetadata: any;
|
||||
|
||||
expandedRows = {};
|
||||
|
||||
activityValues: number[] = [0, 100];
|
||||
|
||||
isExpanded: boolean = false;
|
||||
|
||||
idFrozen: boolean = false;
|
||||
|
||||
loading:boolean = true;
|
||||
|
||||
@ViewChild('dt') table: Table;
|
||||
|
||||
@ViewChild('filter') filter: ElementRef;
|
||||
|
||||
constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.customerService.getCustomersLarge().then(customers => {
|
||||
this.customers1 = customers;
|
||||
this.loading = false;
|
||||
|
||||
// @ts-ignore
|
||||
this.customers1.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
|
||||
this.customerService.getCustomersLarge().then(customers => this.customers3 = customers);
|
||||
this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||
|
||||
this.representatives = [
|
||||
{name: 'Amy Elsner', image: 'amyelsner.png'},
|
||||
{name: 'Anna Fali', image: 'annafali.png'},
|
||||
{name: 'Asiya Javayant', image: 'asiyajavayant.png'},
|
||||
{name: 'Bernardo Dominic', image: 'bernardodominic.png'},
|
||||
{name: 'Elwin Sharvill', image: 'elwinsharvill.png'},
|
||||
{name: 'Ioni Bowcher', image: 'ionibowcher.png'},
|
||||
{name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png'},
|
||||
{name: 'Onyama Limba', image: 'onyamalimba.png'},
|
||||
{name: 'Stephen Shaw', image: 'stephenshaw.png'},
|
||||
{name: 'XuXue Feng', image: 'xuxuefeng.png'}
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{label: 'Unqualified', value: 'unqualified'},
|
||||
{label: 'Qualified', value: 'qualified'},
|
||||
{label: 'New', value: 'new'},
|
||||
{label: 'Negotiation', value: 'negotiation'},
|
||||
{label: 'Renewal', value: 'renewal'},
|
||||
{label: 'Proposal', value: 'proposal'}
|
||||
];
|
||||
}
|
||||
|
||||
onSort() {
|
||||
this.updateRowGroupMetaData();
|
||||
}
|
||||
|
||||
updateRowGroupMetaData() {
|
||||
this.rowGroupMetadata = {};
|
||||
|
||||
if (this.customers3) {
|
||||
for (let i = 0; i < this.customers3.length; i++) {
|
||||
const rowData = this.customers3[i];
|
||||
const representativeName = rowData.representative.name;
|
||||
|
||||
if (i === 0) {
|
||||
this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
|
||||
}
|
||||
else {
|
||||
const previousRowData = this.customers3[i - 1];
|
||||
const previousRowGroup = previousRowData.representative.name;
|
||||
if (representativeName === previousRowGroup) {
|
||||
this.rowGroupMetadata[representativeName].size++;
|
||||
}
|
||||
else {
|
||||
this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expandAll() {
|
||||
if(!this.isExpanded){
|
||||
this.products.forEach(product => this.expandedRows[product.name] = true);
|
||||
|
||||
} else {
|
||||
this.expandedRows={};
|
||||
}
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
|
||||
clear(table: Table) {
|
||||
table.clear();
|
||||
this.filter.nativeElement.value = '';
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4>Timeline</h4>
|
||||
|
||||
<h5>Custom Timeline</h5>
|
||||
<p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline">
|
||||
<ng-template pTemplate="marker" let-event>
|
||||
<span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
|
||||
<i [ngClass]="event.icon"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="content" let-event>
|
||||
<p-card [header]="event.status" [subheader]="event.date">
|
||||
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
|
||||
<button pButton label="Read more" class="p-button-text"></button>
|
||||
</p-card>
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
|
||||
<h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
|
||||
<p-timeline [value]="horizontalEvents" layout="horizontal" align="alternate">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event}}
|
||||
</ng-template>
|
||||
<ng-template pTemplate="opposite" let-event>
|
||||
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,72 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PrimeIcons } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './timeline.component.html',
|
||||
styles: [`
|
||||
.custom-marker {
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.p-timeline-event-content,
|
||||
.p-timeline-event-opposite {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
::ng-deep {
|
||||
.customized-timeline {
|
||||
.p-timeline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
|
||||
.p-timeline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class TimelineComponent implements OnInit{
|
||||
|
||||
customEvents: any[];
|
||||
|
||||
horizontalEvents: any[];
|
||||
|
||||
ngOnInit() {
|
||||
this.customEvents = [
|
||||
{
|
||||
status: 'Ordered',
|
||||
date: '15/10/2020 10:30',
|
||||
icon: PrimeIcons.SHOPPING_CART,
|
||||
color: '#9C27B0',
|
||||
image: 'game-controller.jpg'
|
||||
},
|
||||
{status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'},
|
||||
{status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'},
|
||||
{status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'}
|
||||
];
|
||||
|
||||
this.horizontalEvents = [
|
||||
'2020', '2021', '2022', '2023'
|
||||
];
|
||||
}
|
||||
}
|
||||
6
src/app/demo/api/image.ts
Normal file
6
src/app/demo/api/image.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface Image {
|
||||
previewImageSrc?:any;
|
||||
thumbnailImageSrc?:any;
|
||||
alt?:any;
|
||||
title?:any;
|
||||
}
|
||||
2
src/app/api/product.ts → src/app/demo/api/product.ts
Executable file → Normal file
2
src/app/api/product.ts → src/app/demo/api/product.ts
Executable file → Normal file
@ -5,7 +5,7 @@ export interface Product {
|
||||
description?: string;
|
||||
price?: number;
|
||||
quantity?: number;
|
||||
inventoryStatus?: string;
|
||||
inventoryStatus?: any;
|
||||
category?: string;
|
||||
image?: string;
|
||||
rating?: number;
|
||||
11
src/app/demo/components/auth/access/access-routing.module.ts
Normal file
11
src/app/demo/components/auth/access/access-routing.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { AccessComponent } from './access.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: AccessComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AccessRoutingModule { }
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
<img src="assets/demo/images/access/logo-orange.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
|
||||
<img src="assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%">
|
||||
<img src="assets/demo/images/access/asset-access.svg" alt="Access denied" class="mt-5" width="80%">
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
|
||||
</div>
|
||||
7
src/app/demo/components/auth/access/access.component.ts
Normal file
7
src/app/demo/components/auth/access/access.component.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-access',
|
||||
templateUrl: './access.component.html',
|
||||
})
|
||||
export class AccessComponent { }
|
||||
16
src/app/demo/components/auth/access/access.module.ts
Normal file
16
src/app/demo/components/auth/access/access.module.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
import { AccessRoutingModule } from './access-routing.module';
|
||||
import { AccessComponent } from './access.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AccessRoutingModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [AccessComponent]
|
||||
})
|
||||
export class AccessModule { }
|
||||
12
src/app/demo/components/auth/auth-routing.module.ts
Normal file
12
src/app/demo/components/auth/auth-routing.module.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: 'error', loadChildren: () => import('./error/error.module').then(m => m.ErrorModule) },
|
||||
{ path: 'access', loadChildren: () => import('./access/access.module').then(m => m.AccessModule) },
|
||||
{ path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AuthRoutingModule { }
|
||||
11
src/app/demo/components/auth/auth.module.ts
Normal file
11
src/app/demo/components/auth/auth.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AuthRoutingModule } from './auth-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AuthRoutingModule
|
||||
]
|
||||
})
|
||||
export class AuthModule { }
|
||||
11
src/app/demo/components/auth/error/error-routing.module.ts
Normal file
11
src/app/demo/components/auth/error/error-routing.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ErrorComponent } from './error.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: ErrorComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ErrorRoutingModule { }
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%;">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-error.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
<img src="assets/demo/images/error/logo-error.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-600">Requested resource is not available.</span>
|
||||
<img src="assets/layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%">
|
||||
<img src="assets/demo/images/error/asset-error.svg" alt="Error" class="mt-5" width="80%">
|
||||
<div class="col-12 mt-5 text-center">
|
||||
<i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
|
||||
</div>
|
||||
7
src/app/demo/components/auth/error/error.component.ts
Normal file
7
src/app/demo/components/auth/error/error.component.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
templateUrl: './error.component.html',
|
||||
})
|
||||
export class ErrorComponent { }
|
||||
15
src/app/demo/components/auth/error/error.module.ts
Normal file
15
src/app/demo/components/auth/error/error.module.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ErrorRoutingModule } from './error-routing.module';
|
||||
import { ErrorComponent } from './error.component';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ErrorRoutingModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [ErrorComponent]
|
||||
})
|
||||
export class ErrorModule { }
|
||||
11
src/app/demo/components/auth/login/login-routing.module.ts
Normal file
11
src/app/demo/components/auth/login/login-routing.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: LoginComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class LoginRoutingModule { }
|
||||
@ -1,23 +1,23 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3">
|
||||
<img src="assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
|
||||
<span class="text-600 font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full md:w-10 mx-auto">
|
||||
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full mb-3" style="padding:1rem;">
|
||||
|
||||
|
||||
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
|
||||
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-5">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
@ -30,4 +30,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
33
src/app/demo/components/auth/login/login.component.ts
Normal file
33
src/app/demo/components/auth/login/login.component.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-password input {
|
||||
width: 100%;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye-slash{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
valCheck: string[] = ['remember'];
|
||||
|
||||
password!: string;
|
||||
|
||||
constructor(public layoutService: LayoutService) { }
|
||||
}
|
||||
23
src/app/demo/components/auth/login/login.module.ts
Normal file
23
src/app/demo/components/auth/login/login.module.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { LoginRoutingModule } from './login-routing.module';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
LoginRoutingModule,
|
||||
ButtonModule,
|
||||
CheckboxModule,
|
||||
InputTextModule,
|
||||
FormsModule,
|
||||
PasswordModule
|
||||
],
|
||||
declarations: [LoginComponent]
|
||||
})
|
||||
export class LoginModule { }
|
||||
44
src/app/demo/components/code/code.component.scss
Normal file
44
src/app/demo/components/code/code.component.scss
Normal file
@ -0,0 +1,44 @@
|
||||
pre[class*="language-"] {
|
||||
border-radius: 12px !important;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: .5rem solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-ground) !important;
|
||||
margin: 0 !important;
|
||||
color: var(--surface-900);
|
||||
font-size: 14px;
|
||||
border-radius: 10px !important;
|
||||
|
||||
.token {
|
||||
|
||||
&.tag,
|
||||
&.keyword {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.attr-string {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: #4CAF50 !important;
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.string {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
@ -7,12 +7,14 @@ import { CommonModule } from '@angular/common';
|
||||
<pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
|
||||
</code></pre>
|
||||
`,
|
||||
styleUrls: ['./code.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AppCodeComponent implements AfterViewInit {
|
||||
|
||||
@Input() lang = 'markup';
|
||||
|
||||
@ViewChild('code') codeViewChild: ElementRef;
|
||||
@ViewChild('code') codeViewChild!: ElementRef;
|
||||
|
||||
constructor(public el: ElementRef) { }
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: DashboardComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardsRoutingModule { }
|
||||
10
src/app/components/dashboard/dashboard.component.html → src/app/demo/components/dashboard/dashboard.component.html
Executable file → Normal file
10
src/app/components/dashboard/dashboard.component.html → src/app/demo/components/dashboard/dashboard.component.html
Executable file → Normal file
@ -218,15 +218,12 @@
|
||||
<div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
|
||||
<i class="pi pi-question text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-900 line-height-3">Jane Davis
|
||||
<span class="text-700"> has posted a new questions about your product.</span>
|
||||
</span>
|
||||
<span class="text-900 line-height-3">Jane Davis<span class="text-700"> has posted a new questions about your product.</span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3"
|
||||
[ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
|
||||
<div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3" [ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
|
||||
<div>
|
||||
<div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
|
||||
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
|
||||
@ -236,8 +233,7 @@
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
103
src/app/demo/components/dashboard/dashboard.component.ts
Normal file
103
src/app/demo/components/dashboard/dashboard.component.ts
Normal file
@ -0,0 +1,103 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/product.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent implements OnInit, OnDestroy {
|
||||
|
||||
items!: MenuItem[];
|
||||
|
||||
products!: Product[];
|
||||
|
||||
chartData: any;
|
||||
|
||||
chartOptions: any;
|
||||
|
||||
subscription!: Subscription;
|
||||
|
||||
constructor(private productService: ProductService, public layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$.subscribe(() => {
|
||||
this.initChart();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initChart();
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
|
||||
this.items = [
|
||||
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
|
||||
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
|
||||
];
|
||||
}
|
||||
|
||||
initChart() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--text-color');
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
this.chartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--green-600'),
|
||||
borderColor: documentStyle.getPropertyValue('--green-600'),
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
27
src/app/demo/components/dashboard/dashboard.module.ts
Normal file
27
src/app/demo/components/dashboard/dashboard.module.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { PanelMenuModule } from 'primeng/panelmenu';
|
||||
import { DashboardsRoutingModule } from './dashboard-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ChartModule,
|
||||
MenuModule,
|
||||
TableModule,
|
||||
StyleClassModule,
|
||||
PanelMenuModule,
|
||||
ButtonModule,
|
||||
DashboardsRoutingModule
|
||||
],
|
||||
declarations: [DashboardComponent]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { DocumentationComponent } from './documentation.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: DocumentationComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DocumentationRoutingModule { }
|
||||
@ -0,0 +1,137 @@
|
||||
<div class="card mb-3">
|
||||
<div>
|
||||
<h2>Documentation</h2>
|
||||
<h4>Getting Started</h4>
|
||||
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v13 with PrimeNG v13. In case CLI is not installed already, use the command below to set it up.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install -g @angular/cli
|
||||
</app-code>
|
||||
|
||||
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
|
||||
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
cd sakai
|
||||
npm install
|
||||
ng serve
|
||||
</app-code>
|
||||
|
||||
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
|
||||
|
||||
<h5>Important CLI Commands</h5>
|
||||
<p>Following commands are derived from CLI.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
||||
|
||||
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
|
||||
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
Run 'ng help' for more options.
|
||||
</app-code>
|
||||
|
||||
<h4>Structure</h4>
|
||||
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
|
||||
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
|
||||
</p>
|
||||
|
||||
<h5>Default Configuration</h5>
|
||||
<p>Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
|
||||
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by default and
|
||||
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values
|
||||
to avoid sync issues. </p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="javascript">
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
import { LayoutService } from './layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
constructor(private primengConfig: PrimeNGConfig, private layoutService: LayoutService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.primengConfig.ripple = true; //enables core ripple functionality
|
||||
|
||||
//optional configuration with the default configuration
|
||||
this.layoutService.config = {
|
||||
ripple: false, //toggles ripple on and off
|
||||
inputStyle: 'outlined', //default style for input elements
|
||||
menuMode: 'static', //layout mode of the menu, valid values are "static" and "overlay"
|
||||
colorScheme: 'light', //color scheme of the template, valid values are "light" and "dark"
|
||||
theme: 'lara-light-indigo', //default component theme for PrimeNG
|
||||
scale: 14 //size of the body font size to scale the whole application
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
</app-code>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems,
|
||||
navigate to this file and define your own model as a nested structure.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="javascript">
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
templateUrl: './app.menu.component.html'
|
||||
})
|
||||
export class AppMenuComponent implements OnInit {
|
||||
|
||||
model: any[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
this.model = [
|
||||
{
|
||||
label: 'Home',
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
icon: 'pi pi-fw pi-home',
|
||||
routerLink: ['/']
|
||||
}
|
||||
]
|
||||
},
|
||||
//...
|
||||
];
|
||||
}
|
||||
}
|
||||
</app-code>
|
||||
|
||||
<h4>Integration with Existing Angular CLI Projects</h4>
|
||||
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h4>Theme</h4>
|
||||
<p>Sakai provides 24 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
|
||||
to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span>
|
||||
folder such as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
|
||||
|
||||
<p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
|
||||
|
||||
<h5>Theme Designer</h5>
|
||||
<p>Sakai includes a simplified version of the <a href="">PrimeNG Theme Designer</a> that only includes the main SASS structure. Full list of SASS variables to customize the components further is available at the
|
||||
<a href="https://www.primefaces.org/designer/api/primeng/13.2.0/" class="font-medium text-primary hover:underline">SASS API</a> docs.
|
||||
</p>
|
||||
|
||||
<h4>Migration Guide</h4>
|
||||
<p>Every important change is included in <b>CHANGELOG.md</b> file at the root folder of the distribution along with the instructions to update. Whenever a major version of Angular is released, a new version of the template
|
||||
is provided that mainly brings compatibility support to the PrimeNG component theming. If there are no compatibility issues on component theming e.g. new components or new functionality to PrimeNG,
|
||||
you may still update your application to the latest Angular and PrimeNG without the need to waiting for an update.</p>
|
||||
</div>
|
||||
</div>
|
||||
2
src/app/components/documentation/documentation.component.ts → src/app/demo/components/documentation/documentation.component.ts
Executable file → Normal file
2
src/app/components/documentation/documentation.component.ts → src/app/demo/components/documentation/documentation.component.ts
Executable file → Normal file
@ -3,4 +3,4 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
templateUrl: './documentation.component.html'
|
||||
})
|
||||
export class DocumentationComponent {}
|
||||
export class DocumentationComponent { }
|
||||
@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DocumentationRoutingModule } from './documentation-routing.module';
|
||||
import { AppCodeModule } from '../code/code.component';
|
||||
import { DocumentationComponent } from './documentation.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AppCodeModule,
|
||||
DocumentationRoutingModule
|
||||
],
|
||||
declarations: [DocumentationComponent]
|
||||
})
|
||||
export class DocumentationModule { }
|
||||
11
src/app/demo/components/landing/landing-routing.module.ts
Normal file
11
src/app/demo/components/landing/landing-routing.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { LandingComponent } from './landing.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: LandingComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class LandingRoutingModule { }
|
||||
359
src/app/demo/components/landing/landing.component.html
Normal file
359
src/app/demo/components/landing/landing.component.html
Normal file
@ -0,0 +1,359 @@
|
||||
<div class="surface-0 flex justify-content-center">
|
||||
<div id="home" class="landing-wrapper overflow-hidden">
|
||||
<div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
|
||||
<a class="flex align-items-center" href="#">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
|
||||
</a>
|
||||
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</a>
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:85%">
|
||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
|
||||
<button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" class="grid py-4 px-4 lg:px-8 relative">
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
||||
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
|
||||
</div>
|
||||
<img src="assets/demo/images/landing/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 text-center mt-8 mb-4">
|
||||
<h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
|
||||
<span class="text-600 text-2xl">Placerat in egestas erat...</span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Easy to Use</h5>
|
||||
<span class="text-600">Posuere morbi leo urna molestie.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Fresh Design</h5>
|
||||
<span class="text-600">Semper risus in hendrerit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Well Documented</h5>
|
||||
<span class="text-600">Non arcu risus quis varius quam quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Responsive Layout</h5>
|
||||
<span class="text-600">Nulla malesuada pellentesque elit.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Clean Code</h5>
|
||||
<span class="text-600">Condimentum lacinia quis vel eros.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Dark Mode</h5>
|
||||
<span class="text-600">Convallis tellus id interdum velit laoreet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Ready to Use</h5>
|
||||
<span class="text-600">Mauris sit amet massa vitae.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Modern Practices</h5>
|
||||
<span class="text-600">Elementum nibh tellus molestie nunc non.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
|
||||
<div style="height:160px; padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
|
||||
<div class="p-3 surface-card h-full" style="border-radius:8px;">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||
</div>
|
||||
<h5 class="mb-2 text-900">Privacy</h5>
|
||||
<span class="text-600">Neque egestas congue quisque.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
|
||||
<div class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
|
||||
<h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
|
||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||
<p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
|
||||
<img src="assets/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-8 pb-2 md:pb-8">
|
||||
<div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0" style="border-radius:8px;">
|
||||
<img src="assets/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile">
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
|
||||
<div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
|
||||
<i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
|
||||
<span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid my-8 pt-2 md:pt-8">
|
||||
<div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
|
||||
<div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start" style="width:4.2rem; height:4.2rem; border-radius:10px;">
|
||||
<i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
|
||||
</div>
|
||||
<h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
|
||||
<span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
|
||||
<img src="assets/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||
<div class="grid justify-content-between">
|
||||
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
|
||||
<h4 class="font-medium text-3xl text-900">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-10 lg:col-7">
|
||||
<div class="grid text-center md:text-left">
|
||||
<div class="col-12 md:col-3">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/demo/images/landing/new-badge.svg" class="ml-2"/></a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||
<h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
|
||||
<a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
63
src/app/demo/components/landing/landing.component.ts
Normal file
63
src/app/demo/components/landing/landing.component.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
templateUrl: './landing.component.html',
|
||||
styles: [`
|
||||
#hero{
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
||||
height:700px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pricing-card:hover{
|
||||
border:2px solid var(--cyan-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#hero{
|
||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||
clip-path: ellipse(150% 87% at 93% 13%);
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px){
|
||||
#hero > img {
|
||||
position: absolute;
|
||||
transform:scale(1.2);
|
||||
top:15%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px){
|
||||
#hero {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#hero > img {
|
||||
position:static;
|
||||
transform: scale(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#hero > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingComponent {
|
||||
constructor(public layoutService: LayoutService, public router: Router) { }
|
||||
}
|
||||
23
src/app/demo/components/landing/landing.module.ts
Normal file
23
src/app/demo/components/landing/landing.module.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { LandingRoutingModule } from './landing-routing.module';
|
||||
import { LandingComponent } from './landing.component';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { PanelModule } from 'primeng/panel';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
LandingRoutingModule,
|
||||
DividerModule,
|
||||
StyleClassModule,
|
||||
ChartModule,
|
||||
PanelModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [LandingComponent]
|
||||
})
|
||||
export class LandingModule { }
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
<img src="assets/demo/images/notfound/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
7
src/app/demo/components/notfound/notfound.component.ts
Normal file
7
src/app/demo/components/notfound/notfound.component.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notfound',
|
||||
templateUrl: './notfound.component.html',
|
||||
})
|
||||
export class NotfoundComponent { }
|
||||
11
src/app/demo/components/pages/crud/crud-routing.module.ts
Normal file
11
src/app/demo/components/pages/crud/crud-routing.module.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CrudComponent } from './crud.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: CrudComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class CrudRoutingModule { }
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card px-6 py-6">
|
||||
<p-toast></p-toast>
|
||||
<p-toolbar styleClass="mb-4">
|
||||
<ng-template pTemplate="left">
|
||||
@ -22,7 +22,7 @@
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<span class="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
|
||||
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." class="w-full sm:w-auto"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
@ -98,7 +98,7 @@
|
||||
<label for="status">Inventory Status</label>
|
||||
<p-dropdown id="status" [options]="statuses" optionLabel="label" [(ngModel)]="product.inventoryStatus" placeholder="Select a Status">
|
||||
<ng-template pTemplate="selectedItem">
|
||||
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.value">{{product.inventoryStatus.label}}</span>
|
||||
<span *ngIf="product && product.inventoryStatus" [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</ng-template>
|
||||
<ng-template let-status pTemplate="status">
|
||||
<span [class]="'product-badge status-' + status.value.toLowerCase()">{{status.label}}</span>
|
||||
@ -1,53 +1,52 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Product } from '../../api/product';
|
||||
import { ProductService } from '../../service/productservice';
|
||||
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
import { Product } from 'src/app/demo/api/product';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { Table } from 'primeng/table';
|
||||
import { ProductService } from 'src/app/demo/service/product.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './crud.component.html',
|
||||
providers: [MessageService, ConfirmationService],
|
||||
styleUrls: ['../../../assets/demo/badges.scss']
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class CrudComponent implements OnInit {
|
||||
|
||||
productDialog: boolean;
|
||||
productDialog: boolean = false;
|
||||
|
||||
deleteProductDialog: boolean = false;
|
||||
|
||||
deleteProductsDialog: boolean = false;
|
||||
|
||||
products: Product[];
|
||||
products: Product[] = [];
|
||||
|
||||
product: Product;
|
||||
product: Product = {};
|
||||
|
||||
selectedProducts: Product[];
|
||||
selectedProducts: Product[] = [];
|
||||
|
||||
submitted: boolean;
|
||||
submitted: boolean = false;
|
||||
|
||||
cols: any[];
|
||||
cols: any[] = [];
|
||||
|
||||
statuses: any[];
|
||||
statuses: any[] = [];
|
||||
|
||||
rowsPerPageOptions = [5, 10, 20];
|
||||
|
||||
constructor(private productService: ProductService, private messageService: MessageService,
|
||||
private confirmationService: ConfirmationService) {}
|
||||
constructor(private productService: ProductService, private messageService: MessageService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.cols = [
|
||||
{field: 'name', header: 'Name'},
|
||||
{field: 'price', header: 'Price'},
|
||||
{field: 'category', header: 'Category'},
|
||||
{field: 'rating', header: 'Reviews'},
|
||||
{field: 'inventoryStatus', header: 'Status'}
|
||||
{ field: 'product', header: 'Product' },
|
||||
{ field: 'price', header: 'Price' },
|
||||
{ field: 'category', header: 'Category' },
|
||||
{ field: 'rating', header: 'Reviews' },
|
||||
{ field: 'inventoryStatus', header: 'Status' }
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{label: 'INSTOCK', value: 'instock'},
|
||||
{label: 'LOWSTOCK', value: 'lowstock'},
|
||||
{label: 'OUTOFSTOCK', value: 'outofstock'}
|
||||
{ label: 'INSTOCK', value: 'instock' },
|
||||
{ label: 'LOWSTOCK', value: 'lowstock' },
|
||||
{ label: 'OUTOFSTOCK', value: 'outofstock' }
|
||||
];
|
||||
}
|
||||
|
||||
@ -62,26 +61,26 @@ export class CrudComponent implements OnInit {
|
||||
}
|
||||
|
||||
editProduct(product: Product) {
|
||||
this.product = {...product};
|
||||
this.product = { ...product };
|
||||
this.productDialog = true;
|
||||
}
|
||||
|
||||
deleteProduct(product: Product) {
|
||||
this.deleteProductDialog = true;
|
||||
this.product = {...product};
|
||||
this.product = { ...product };
|
||||
}
|
||||
|
||||
confirmDeleteSelected(){
|
||||
confirmDeleteSelected() {
|
||||
this.deleteProductsDialog = false;
|
||||
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000});
|
||||
this.selectedProducts = null;
|
||||
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
|
||||
this.selectedProducts = [];
|
||||
}
|
||||
|
||||
confirmDelete(){
|
||||
confirmDelete() {
|
||||
this.deleteProductDialog = false;
|
||||
this.products = this.products.filter(val => val.id !== this.product.id);
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000});
|
||||
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
|
||||
this.product = {};
|
||||
}
|
||||
|
||||
@ -93,12 +92,12 @@ export class CrudComponent implements OnInit {
|
||||
saveProduct() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.product.name.trim()) {
|
||||
if (this.product.name?.trim()) {
|
||||
if (this.product.id) {
|
||||
// @ts-ignore
|
||||
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
|
||||
this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
|
||||
this.products[this.findIndexById(this.product.id)] = this.product;
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000});
|
||||
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
|
||||
} else {
|
||||
this.product.id = this.createId();
|
||||
this.product.code = this.createId();
|
||||
@ -106,7 +105,7 @@ export class CrudComponent implements OnInit {
|
||||
// @ts-ignore
|
||||
this.product.inventoryStatus = this.product.inventoryStatus ? this.product.inventoryStatus.value : 'INSTOCK';
|
||||
this.products.push(this.product);
|
||||
this.messageService.add({severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000});
|
||||
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
|
||||
}
|
||||
|
||||
this.products = [...this.products];
|
||||
@ -135,4 +134,8 @@ export class CrudComponent implements OnInit {
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
onGlobalFilter(table: Table, event: Event) {
|
||||
table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
|
||||
}
|
||||
}
|
||||
41
src/app/demo/components/pages/crud/crud.module.ts
Normal file
41
src/app/demo/components/pages/crud/crud.module.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CrudRoutingModule } from './crud-routing.module';
|
||||
import { CrudComponent } from './crud.component';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { FileUploadModule } from 'primeng/fileupload';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { ToolbarModule } from 'primeng/toolbar';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { InputNumberModule } from 'primeng/inputnumber';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CrudRoutingModule,
|
||||
TableModule,
|
||||
FileUploadModule,
|
||||
FormsModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
ToastModule,
|
||||
ToolbarModule,
|
||||
RatingModule,
|
||||
InputTextModule,
|
||||
InputTextareaModule,
|
||||
DropdownModule,
|
||||
RadioButtonModule,
|
||||
InputNumberModule,
|
||||
DialogModule
|
||||
],
|
||||
declarations: [CrudComponent]
|
||||
})
|
||||
export class CrudModule { }
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { EmptyDemoComponent } from './emptydemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: EmptyDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class EmptyDemoRoutingModule { }
|
||||
0
src/app/components/empty/empty.component.html → src/app/demo/components/pages/empty/emptydemo.component.html
Executable file → Normal file
0
src/app/components/empty/empty.component.html → src/app/demo/components/pages/empty/emptydemo.component.html
Executable file → Normal file
@ -0,0 +1,6 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './emptydemo.component.html'
|
||||
})
|
||||
export class EmptyDemoComponent { }
|
||||
13
src/app/demo/components/pages/empty/emptydemo.module.ts
Normal file
13
src/app/demo/components/pages/empty/emptydemo.module.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { EmptyDemoRoutingModule } from './emptydemo-routing.module';
|
||||
import { EmptyDemoComponent } from './emptydemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
EmptyDemoRoutingModule
|
||||
],
|
||||
declarations: [EmptyDemoComponent]
|
||||
})
|
||||
export class EmptyDemoModule { }
|
||||
12
src/app/demo/components/pages/pages-routing.module.ts
Normal file
12
src/app/demo/components/pages/pages-routing.module.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: 'crud', loadChildren: () => import('./crud/crud.module').then(m => m.CrudModule) },
|
||||
{ path: 'empty', loadChildren: () => import('./empty/emptydemo.module').then(m => m.EmptyDemoModule) },
|
||||
{ path: 'timeline', loadChildren: () => import('./timeline/timelinedemo.module').then(m => m.TimelineDemoModule) }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PagesRoutingModule { }
|
||||
12
src/app/demo/components/pages/pages.module.ts
Normal file
12
src/app/demo/components/pages/pages.module.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { PagesRoutingModule } from './pages-routing.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
PagesRoutingModule
|
||||
]
|
||||
})
|
||||
export class PagesModule { }
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TimelineDemoComponent } from './timelinedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: TimelineDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TimelineDemoRoutingModule { }
|
||||
@ -0,0 +1,90 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Left Align</h5>
|
||||
<p-timeline [value]="events1">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event.status}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Right Align</h5>
|
||||
<p-timeline [value]="events1" align="right">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event.status}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Alternate Align</h5>
|
||||
<p-timeline [value]="events1" align="alternate">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event.status}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Opposite Content</h5>
|
||||
<p-timeline [value]="events1">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
<small class="p-text-secondary">{{event.date}}</small>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="opposite" let-event>
|
||||
{{event.status}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Customized</h5>
|
||||
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
|
||||
<ng-template pTemplate="marker" let-event>
|
||||
<span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
|
||||
<i [ngClass]="event.icon"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="content" let-event>
|
||||
<p-card [header]="event.status" [subheader]="event.date">
|
||||
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
|
||||
<p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
|
||||
<button pButton label="Read more" class="p-button-outlined mb-5"></button>
|
||||
</p-card>
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<h6>Top Align</h6>
|
||||
<p-timeline [value]="events2" layout="horizontal" align="top">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
|
||||
<h6>Bottom Align</h6>
|
||||
<p-timeline [value]="events2" layout="horizontal" align="bottom">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event}}
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
|
||||
<h6>Alternate Align</h6>
|
||||
<p-timeline [value]="events2" layout="horizontal" align="alternate">
|
||||
<ng-template pTemplate="content" let-event>
|
||||
{{event}}
|
||||
</ng-template>
|
||||
<ng-template pTemplate="opposite" let-event>
|
||||
|
||||
</ng-template>
|
||||
</p-timeline>
|
||||
@ -0,0 +1,27 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { PrimeIcons } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './timelinedemo.component.html',
|
||||
styleUrls: ['./timelinedemo.scss']
|
||||
})
|
||||
export class TimelineDemoComponent {
|
||||
|
||||
events1: any[] = [];
|
||||
|
||||
events2: any[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
this.events1 = [
|
||||
{ status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg' },
|
||||
{ status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7' },
|
||||
{ status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800' },
|
||||
{ status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B' }
|
||||
];
|
||||
|
||||
this.events2 = [
|
||||
"2020", "2021", "2022", "2023"
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TimelineDemoRoutingModule } from './timelinedemo-routing.module';
|
||||
import { TimelineDemoComponent } from './timelinedemo.component';
|
||||
import { TimelineModule } from 'primeng/timeline';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CardModule } from 'primeng/card';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TimelineModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
TimelineDemoRoutingModule
|
||||
],
|
||||
declarations: [TimelineDemoComponent]
|
||||
})
|
||||
export class TimelineDemoModule { }
|
||||
21
src/app/demo/components/pages/timeline/timelinedemo.scss
Normal file
21
src/app/demo/components/pages/timeline/timelinedemo.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@media screen and (max-width: 960px) {
|
||||
::ng-deep {
|
||||
.customized-timeline {
|
||||
.p-timeline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
|
||||
.p-timeline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
|
||||
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
|
||||
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
|
||||
</section>
|
||||
@ -406,4 +406,4 @@
|
||||
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
</block-viewer>
|
||||
399
src/app/demo/components/primeblocks/blocks/blocks.component.ts
Normal file
399
src/app/demo/components/primeblocks/blocks/blocks.component.ts
Normal file
@ -0,0 +1,399 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './blocks.component.html'
|
||||
})
|
||||
export class BlocksComponent {
|
||||
|
||||
block1: string = `
|
||||
<div class="grid grid-nogutter surface-section text-800">
|
||||
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
|
||||
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 overflow-hidden">
|
||||
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block2: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
|
||||
<div class="mb-3 font-bold text-2xl">
|
||||
<span class="text-900">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Built for Developers</div>
|
||||
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Easy to Use</div>
|
||||
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
|
||||
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Open Source</div>
|
||||
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
|
||||
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block3: string = `
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
|
||||
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$9</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$29</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$49</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block4: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-700 text-center">
|
||||
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
|
||||
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block5: string = `
|
||||
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
|
||||
<div class="font-bold mr-8">🔥 Hot Deals!</div>
|
||||
<div class="align-items-center hidden lg:flex">
|
||||
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex align-items-center ml-2 mr-8">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>`;
|
||||
|
||||
block6: string = `
|
||||
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
|
||||
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
|
||||
<li>
|
||||
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-500 line-height-3"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-900 line-height-3">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-900">Customers</div>
|
||||
<div class="flex align-items-center text-700 flex-wrap">
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block7: string = `
|
||||
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block8: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
|
||||
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" pInputText class="w-full mb-3">
|
||||
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
|
||||
<input id="password1" type="password" pInputText class="w-full mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-6">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block9: string = `
|
||||
<div class="surface-section">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
|
||||
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
|
||||
<p-chip label="Crime" class="mr-2"></p-chip>
|
||||
<p-chip label="Drama" class="mr-2"></p-chip>
|
||||
<p-chip label="Thriller"></p-chip>
|
||||
</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
block10: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
|
||||
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
|
||||
</div>`;
|
||||
|
||||
}
|
||||
@ -90,10 +90,11 @@
|
||||
|
||||
:host ::ng-deep pre[class*="language-"] {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 0 none !important;
|
||||
@ -116,4 +117,4 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
enum BlockView {
|
||||
PREVIEW,
|
||||
CODE
|
||||
PREVIEW,
|
||||
CODE
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'block-viewer',
|
||||
template: `
|
||||
selector: 'block-viewer',
|
||||
template: `
|
||||
<div class="block-section">
|
||||
<div class="block-header">
|
||||
<span class="block-title">
|
||||
@ -35,35 +35,36 @@ enum BlockView {
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./blockviewer.component.scss']
|
||||
styleUrls: ['./blockviewer.component.scss']
|
||||
})
|
||||
export class BlockViewer {
|
||||
|
||||
@Input() header: string;
|
||||
|
||||
@Input() code: string;
|
||||
@Input() header!: string;
|
||||
|
||||
@Input() containerClass: string;
|
||||
@Input() code!: string;
|
||||
|
||||
@Input() previewStyle: string;
|
||||
@Input() containerClass!: string;
|
||||
|
||||
@Input() free: boolean = true;
|
||||
@Input() previewStyle!: object;
|
||||
|
||||
@Input() new: boolean = false;
|
||||
@Input() free: boolean = true;
|
||||
|
||||
BlockView = BlockView;
|
||||
@Input() new: boolean = false;
|
||||
|
||||
blockView: BlockView = BlockView.PREVIEW;
|
||||
BlockView = BlockView;
|
||||
|
||||
activateView(event: Event, blockView: BlockView) {
|
||||
blockView: BlockView = BlockView.PREVIEW;
|
||||
|
||||
this.blockView = blockView;
|
||||
event.preventDefault();
|
||||
}
|
||||
activateView(event: Event, blockView: BlockView) {
|
||||
|
||||
async copyCode(event: Event) {
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
event.preventDefault();
|
||||
}
|
||||
this.blockView = blockView;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
async copyCode(event: Event) {
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { BlocksComponent } from './blocks/blocks.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: BlocksComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PrimeBlocksRoutingModule { }
|
||||
33
src/app/demo/components/primeblocks/primeblocks.module.ts
Normal file
33
src/app/demo/components/primeblocks/primeblocks.module.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BlocksComponent } from './blocks/blocks.component';
|
||||
import { PrimeBlocksRoutingModule } from './primeblocks-routing.module';
|
||||
import { BlockViewer } from './blockviewer/blockviewer.component'
|
||||
import { AppCodeModule } from '../code/code.component';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AppCodeModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
ChipModule,
|
||||
CheckboxModule,
|
||||
FormsModule,
|
||||
InputTextModule,
|
||||
PasswordModule,
|
||||
TooltipModule,
|
||||
PrimeBlocksRoutingModule,
|
||||
AppCodeModule
|
||||
],
|
||||
declarations: [BlocksComponent, BlockViewer]
|
||||
})
|
||||
export class PrimeBlocksModule { }
|
||||
@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ButtonDemoComponent } from './buttondemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: ButtonDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ButtonDemoRoutingModule { }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user