+
+
+
+ Create the screens your
+
+
+ your visitors deserve to see
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ + + +
+ 
+
+
+
+
+
+ One Product,
+ Many Solutions
+
+ Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
+
+
+
+
+
+
+
+ Built for Developers
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+
+
+
+
+ End-to-End Encryption
+ Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.
+
+
+
+
+
+ Easy to Use
+ Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.
+
+
+
+
+
+ Fast & Global Support
+ Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.
+
+
+
+
+
+ Open Source
+ Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat.
+
+
+
+
+
+ Trusted Securitty
+ Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.
+
+
+Pricing Plans
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ Basic
+ Plan description
+ +
+ $9
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
+ +
+
+
+
+
+
+
+
+
+ +
+ Premium
+ Plan description
+ +
+ $29
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
- + + Duis ultricies lacus sed + +
+ +
+
+
+
+
+
+
+
+ +
+ Enterprise
+ Plan description
+ +
+ $49
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
- + + Duis ultricies lacus sed + +
- + + Imperdiet proin + +
- + + Nisi scelerisque + +
+ +
+
+
+
+ POWERED BY DISCORD
+ Join Our Design Community
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+
+
+
+-
+
- + Application + +
- + + +
- + Analytics + +
+
+
+
+ Customers
+
+
+
+
+ 332 Active Users
+
+
+
+ 9402 Sessions
+
+
+
+ 2.32m Avg. Duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 24 new
+ since last visit
+
+ Orders
+
+ 152
+
+
+
+
+
+
+
+
+
+ %52+
+ since last week
+
+ Revenue
+
+ $2.100
+
+
+
+
+
+
+
+
+
+ 520
+ newly registered
+
+ Customers
+
+ 28441
+
+
+
+
+
+
+
+
+
+ 85
+ responded
+
+ Comments
+
+ 152 Unread
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Forgot password?
+
+
+Movie Information
+ Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
+ -
+
-
+ Title+Heat++ ++
+
-
+ Genre+++
+ + + + ++
+ -
+ Director+Michael Mann++ ++
+
-
+ Actors+Robert De Niro, Al Pacino++ ++
+
-
+ Plot++ A group of professional bank robbers start to feel the heat from police + when they unknowingly leave a clue at their latest heist.++ ++
+
+
+Card Title
+ Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
+
+
+
`;
+
+ block2: string = `
+
+
+ Create the screens your
+
+
+ your visitors deserve to see
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ + + +
+
+
+
+
+
`;
+
+ block3: string = `
+
+ One Product,
+ Many Solutions
+
+ Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
+
+
+
+
+
+
+
+ Built for Developers
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+
+
+
+
+ End-to-End Encryption
+ Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.
+
+
+
+
+
+ Easy to Use
+ Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.
+
+
+
+
+
+ Fast & Global Support
+ Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.
+
+
+
+
+
+ Open Source
+ Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat.
+
+
+
+
+
+ Trusted Securitty
+ Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.
+
+
`;
+
+ block4: string = `
+ Pricing Plans
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ Basic
+ Plan description
+ +
+ $9
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
+ +
+
+
+
+
+
+
+
+
+ +
+ Premium
+ Plan description
+ +
+ $29
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
- + + Duis ultricies lacus sed + +
+ +
+
+
+
+
+
+
+
+ +
+ Enterprise
+ Plan description
+ +
+ $49
+ per month
+
+ +
-
+
- + + Arcu vitae elementum + +
- + + Dui faucibus in ornare + +
- + + Morbi tincidunt augue + +
- + + Duis ultricies lacus sed + +
- + + Imperdiet proin + +
- + + Nisi scelerisque + +
+ +
+
`;
+
+ block5: string = `
+ `;
+
+ block6: string = `
+
+
+ POWERED BY DISCORD
+ Join Our Design Community
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
+
+
+
`;
+
+ block7: string = `
+ -
+
- + Application + +
- + + +
- + Analytics + +
+
+
+
+ Customers
+
+
+
+
+ 332 Active Users
+
+
+
+ 9402 Sessions
+
+
+
+ 2.32m Avg. Duration
+
+
+
+
+
+
+
`;
+
+ block8: string = `
+
+
+
+
+
+
+
+
+ 24 new
+ since last visit
+
+ Orders
+
+ 152
+
+
+
+
+
+
+
+
+
+ %52+
+ since last week
+
+ Revenue
+
+ $2.100
+
+
+
+
+
+
+
+
+
+ 520
+ newly registered
+
+ Customers
+
+ 28441
+
+
+
+
+
+
+
+
+
+ 85
+ responded
+
+ Comments
+
+ 152 Unread
+
+
+
+
+
+
+
`;
+
+ block9: string = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Forgot password?
+
+
`;
+
+ block10: string = `
+ Movie Information
+ Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
+ -
+
-
+ Title+Heat++ ++
+
-
+ Genre+++
+ + + + ++
+ -
+ Director+Michael Mann++ ++
+
-
+ Actors+Robert De Niro, Al Pacino++ ++
+
-
+ Plot++ A group of professional bank robbers start to feel the heat from police + when they unknowingly leave a clue at their latest heist.++ ++
+
+
`;
+
+}
diff --git a/src/app/demo/view/dashboard.component.html b/src/app/demo/view/dashboard.component.html
index 66e34b4..272e0db 100755
--- a/src/app/demo/view/dashboard.component.html
+++ b/src/app/demo/view/dashboard.component.html
@@ -76,7 +76,7 @@
Card Title
+ Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
+
+ 
+
Dependencies
Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at Why PrimeNG Templates article.
-Once CLI is ready in your system, extract the contents of the Sakai 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.
-The application should run at http://localhost:4200/, you may now start with the development of your application.
Important CLI Commands
Following commands are derived from CLI.
-Structure
Sakai consists of 2 main parts; the application layout, layout resources. app.component.html inside app folder is the html template for the base layout, @@ -204,18 +204,18 @@ export class AppMenuComponent implements OnInit, AfterViewInit {
Install PrimeNG
-Add PrimeNG CSS at styles section in angular.json.
-Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.
@@ -326,7 +326,6 @@ $menuTooltipTextColor:#ffffff !default;
+
+npm install primeicons --save
+
+
+
+<i class="pi pi-check"></i>
+<i class="pi pi-times"></i>
+
+
+
+
+
+
+<i class="pi pi-check"></i>
+
+
+
+
+
+<i class="pi pi-check" style="font-size: 2rem"></i>
+
+
+
+
+
+<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+
+
+
+
+
diff --git a/src/app/demo/view/iconsdemo.component.scss b/src/app/demo/view/iconsdemo.component.scss
new file mode 100644
index 0000000..d5805f6
--- /dev/null
+++ b/src/app/demo/view/iconsdemo.component.scss
@@ -0,0 +1,19 @@
+.icon-filter {
+ width: 100%;
+ padding: 1rem;
+ margin: 1rem 0 1.5rem 0;
+}
+
+.icons-list {
+ text-align: center;
+
+ i {
+ font-size: 1.5rem;
+ color: var(--text-color-secondary);
+ margin-bottom: .5rem;
+ }
+
+ .md-2 {
+ padding-bottom: 2rem;
+ }
+}
diff --git a/src/app/demo/view/iconsdemo.component.ts b/src/app/demo/view/iconsdemo.component.ts
new file mode 100644
index 0000000..341c5a4
--- /dev/null
+++ b/src/app/demo/view/iconsdemo.component.ts
@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { IconService } from '../service/iconservice';
+
+@Component({
+ selector: 'app-iconsdemo',
+ templateUrl: './iconsdemo.component.html',
+ styleUrls: ['./iconsdemo.component.scss']
+})
+export class IconsDemoComponent 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);
+ });
+ }
+ }
+
+}
diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index 33fa0f4..62e2fd6 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -1,197 +1,139 @@
Icons
+ +Download
+Getting Started
+PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. + A standalone icon can be displayed using an element such as i or span
+ +Size
+Size of the icons can easily be changed using font-size property.
+ +Spinning Animation
+Special pi-spin class applies infinite rotate to an icon.
+ +List of Icons
+Here is the current list of PrimeIcons, more icons will be added periodically. You may also request new icons at the issue tracker.
+
+
+
+
+
+
+
+
+
+ pi-{{icon.properties.name}}
+
-
+
-
- Default
-Pagination, sorting, filtering and checkbox selection.
-Filter Menu
+
-
-
-
-
-
-
-
-
-
- Name
+
+
{{customer.name}}
-
- Country
-
+ 
+ {{customer.country.name}}
-
- Representative
-
+ 
+ {{customer.representative.name}}
-
- Date
+
{{customer.date | date: 'MM/dd/yyyy'}}
-
- Status
+
+ {{customer.balance | currency:'USD':'symbol'}}
+
+
{{customer.status}}
-
- Activity
+
-
-
+
+
- No customers found.
+ No customers found.
-
+
- - List of Customers -
- +
+
+
+
+
-
-
Name
-
+
+
-
-
Country
-
+
+
-
-
Agent
-
+
+
+
+
+
+
+
+
+
+ Agent Picker
+
+
+ 
+ {{option.name}}
+
+
+ {{option.name}}
+
+
+
-
-
Date
-
+
+
+
+
-
-
+ Balance
+
+
Status
-
+
+
+
+ {{option.label}}
+
+
+
+
+
+
+
+
-
Activity
-
+
+
+
+
+
+ {{activityValues[0]}}
+ {{activityValues[1]}}
+
+
+ Verified
+
-
- {{customer.country.name}}
-
+
- {{customer.country.name}}
-
+ {{customer.country.name}}
-
- {{customer.representative.name}}
-
+
- {{customer.representative.name}}
-
+ {{customer.representative.name}}
-
-
-
-
-
-
- Name
-
- Country
-
- Representative
-
- Date
-
- Status
-
- Activity
-
-
-
-
-
-
- Name
- {{customer.name}}
-
-
- Country
-
- {{customer.country.name}}
-
-
- Representative
-
- {{customer.representative.name}}
-
-
- Date
- {{customer.date}}
-
-
- Status
- {{customer.status}}
-
-
- Activity
-
-
-
-
-
- No customers found.
-
-
-
-
Customized
-Scrollable table with gridlines (.p-datatable-gridlines), striped rows (.p-datatable-striped) and smaller paddings (p-datatable-sm).
-
- List of Customers
-
-
-
- {{customer.country.name}}
-
- {{customer.representative.name}}
-
@@ -203,7 +145,7 @@
Name
- Id
+ Id
Country
Date
Company
@@ -216,7 +158,7 @@
{{customer.name}}
- {{customer.id}}
+ {{customer.id}}
{{customer.country.name}}
{{customer.date}}
{{customer.company}}
@@ -305,7 +247,7 @@
-
@@ -319,26 +261,26 @@
-
+
{{customer.representative.name}}
- Name
+ Name
{{customer.name}}
- Country
+ Country
{{customer.country.name}}
- Company
+ Company
{{customer.company}}
- Status
+ Status
{{customer.status}}
- Date
+ Date
{{customer.date}}
diff --git a/src/app/demo/view/tabledemo.component.ts b/src/app/demo/view/tabledemo.component.ts
index 6fc2c50..3626351 100644
--- a/src/app/demo/view/tabledemo.component.ts
+++ b/src/app/demo/view/tabledemo.component.ts
@@ -1,9 +1,10 @@
-import {Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
+import {Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef} from '@angular/core';
import {Customer, Representative} from '../domain/customer';
import {CustomerService} from '../service/customerservice';
import {Product} from '../domain/product';
import {ProductService} from '../service/productservice';
import {Table} from 'primeng/table';
+import {InputText} from 'primeng/inputtext';
import { MessageService, ConfirmationService } from 'primeng/api'
@Component({
@@ -51,13 +52,19 @@ export class TableDemoComponent implements OnInit {
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));
});
@@ -130,4 +137,9 @@ export class TableDemoComponent implements OnInit {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
+
+ clear(table: Table) {
+ table.clear();
+ this.filter.nativeElement.value = '';
+ }
}
diff --git a/src/assets/demo/images/blocks/hero/hero-1.png b/src/assets/demo/images/blocks/hero/hero-1.png
new file mode 100644
index 0000000..18835ad
Binary files /dev/null and b/src/assets/demo/images/blocks/hero/hero-1.png differ
diff --git a/src/assets/demo/images/blocks/logos/hyper.svg b/src/assets/demo/images/blocks/logos/hyper.svg
new file mode 100644
index 0000000..acf30bc
--- /dev/null
+++ b/src/assets/demo/images/blocks/logos/hyper.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/layout/layout.css b/src/assets/layout/layout.css
index 42a15d1..22c0a74 100644
--- a/src/assets/layout/layout.css
+++ b/src/assets/layout/layout.css
@@ -240,7 +240,7 @@ a {
}
.layout-menu li .layout-menuitem-root-text {
text-transform: uppercase;
- color: var(--text-color-secondary);
+ color: var(--surface-900);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.875rem;
@@ -273,6 +273,7 @@ a {
}
.layout-menu li a.router-link-exact-active {
font-weight: 700;
+ color: var(--primary-color);
}
.layout-menu li.active-menuitem > a .menuitem-toggle-icon:before {
content: "\e933";
diff --git a/src/assets/sass/layout/_menu.scss b/src/assets/sass/layout/_menu.scss
index 8e8751b..255788b 100644
--- a/src/assets/sass/layout/_menu.scss
+++ b/src/assets/sass/layout/_menu.scss
@@ -30,7 +30,7 @@
.layout-menuitem-root-text {
text-transform: uppercase;
- color:var(--text-color-secondary);
+ color:var(--surface-900);
font-weight: 600;
margin-bottom: .5rem;
font-size: .875rem;
@@ -65,6 +65,7 @@
&.router-link-exact-active {
font-weight: 700;
+ color: var(--primary-color);
}
}
diff --git a/src/index.html b/src/index.html
index 9ae0616..a50c2c4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
- Sakai PrimeNG
+ Sakai - PrimeNG
Row Group and Scrolling
+Subheader Grouping
{{customer.representative.name}}
{{customer.country.name}}